margin属性在实际中非常常用，也是平时踩坑较多的地方。margin折叠部分相信不少人都因为这样那样的原因中过招。margin负值也是很常用的功能，很多特殊的布局方法都依赖于它。它看似简单，实际上却蛮复杂，本文就margin负值作详细介绍和梳理。

一、表现

虽然margin可以应用到所有元素，但display属性不同时，表现也不同。

1.block元素可以使用四个方向的margin值。

2.inline元素使用上下方向的margin值无效。

3.inline-block使用上下方向的margin负值看上去无效（重点）

二、重叠

margin负值并不总是后面元素覆盖前面元素，它与元素display属性有关系。

1.两个block元素重叠时，后面元素可以覆盖前面元素的背景，但无法覆盖其内容

2.当两个inline元素，或两个line-block元素，或inline与inline-block元素重叠时，后面元素可以覆盖前面元素的背景和内容。

3.当inline元素(或inline-block元素)与block元素重叠时，inline元素(或inline-block元素)覆盖block元素的背景，而内容的话， 后面的元素覆盖前面的元素。

三、浮动

1.block元素与浮动元素重叠时，其边框和背景在该浮动元素之下显示，而内容在浮动元素之上显示。

2.inline或inline-block元素与浮动元素重叠时，其边框、背景和内容都在该浮动元素之上显示。

四、应用

水平垂直居中

如果要居中的元素的宽/高是不变的或者说是确定的，假设width/height=100px，那么设置absolute的top/left=50%，然后margin-left/margin-top=-50px即可，也可以将margin后边的上右下左简写，方向为上右下左顺时针方向。

如果要居中的元素的宽/高是不确定的，这时margin负值就不能使用具体的px了，可以使用百分比。但由于margin的百分比都是相对于包含块的宽度，所以这里限制了只能设置宽高相同的居中元素。包含块的宽度如何获得呢？利用absolute的包裹性，在需要居中的元素外面套一个空的

元素即可。