CSS中的margin外边距重叠(Collapsing margins)指的是毗邻的两个或多个外边距会合并成一个外边距。其中所说的margin毗邻，可以归结为以下两点：

   (1)这两个或多个外边距没有被非空内容、padding、border或clear分隔开。

   (2)这些margin都处于普通流中，浮动元素、inline-block元素、绝对定位元素的margin不会和垂直方向上其他的margin元素重叠。

   (3)只有垂直方向的margin才会折叠，水平方向的margin不会发生折叠的现象。

   margin折叠现象的最终效果可根据计算得来，其计算方法共有如下几种：

   (1)参与折叠的margin都是正值

   例子：

<div style="height:50px; margin-bottom:50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

   示意图：

图1：margin均为正的折叠

   在margin都是正数的情况下，取其中较大的值为最终margin值。如上图1，100px和50px，都是正数，其中最大的是100px，所以取100px作为最终margin值。

   (2)参与折叠的margin都是负值

   当margin值都是负值的时候，取的是其中绝对值较大的，然后，从0位置，负向位移。

   示例代码：

<div style="height:100px; margin-bottom:-75px; width:100px; background-color: red;">A</div>
<div style="height:100px; margin-top:-50px; margin-left:50px; width:100px; background-color: green;">B</div>

   示意图：

图2：margin均为负的折叠

   如上图2，两个负数的绝对值中最大的是75，那么就取-75px，从0开始，负向位移75px。

   (3)参与折叠的margin中有正值、有负值

   如果，毗邻的margin中有正值，也有负值，那么先取出负margin中绝对值最大的，然后和正margin中最大的margin相加。

   示例代码：

<div style="height:50px; margin-bottom:-50px; width:50px; background-color: red;">A</div>
<div style="height:50px; margin-top:100px; width:50px; background-color: green;">B</div>

   示意图：

图3：margin有正、有负的折叠

   如上图3，先取出负数中绝对值最大的，就一个负数-50，所以负数取-50；然后取正数中最大的，就一个正数100，所以正数取100。最后，正负相加：100 + (-50) = 50，所以最终margin的值是50px。

建议继续学习：

1. margin-left负值定位，在ie6下面错位的解决办法    (阅读：1651)
2. 你不该忽视的小问题之margin叠加篇    (阅读：1191)
3. margin那些事儿    (阅读：730)