margin collapse

margin折叠规则

 

• 两个或多个毗邻的普通流中的块元素垂直方向上的margin会折叠

 

 

 

• 浮动元素/inline-block的元素/绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠

 

 

 

•  创建了块级格式化内容的元素，不和它的子元素发生margin折叠

 

 

 

•  元素自身的margin-bottom和margin-top相邻时也会折叠

一个元素margin-top会和它普通流中的第一个子元素(非浮动元素等)的margin-top相邻；只有在一个元素的height是”auto”的情况下，它的margin-bottom才会和它普通流中的最后一个子元素(非浮动元素等)的margin-bottom相邻。

 

<div style="margin:50px 0; background-color:green; 50px;">

    <div style="margin:-60px 0;">

           <div style="margin:150px 0;">A</div>

    </div>
</div>
<div style="margin:-100px 0; background-color:green; 50px;">

    <div style="margin:-120px 0;">

           <div style="margin:200px 0;">B</div>
    </div>
</div>

有人可能说了，算A和B之间的margin，分别算A和其父元素的折叠，然后与其父元素的父元素的折叠，这个值算出来之后，应该是90px。依此法算出B的为80px；然后，A和B折叠，margin 为90px。

对吗？错了，大错特错。错在哪里了呢？

请注意，多个margin相邻折叠成一个margin，所以计算的时候，应该取所有相关的值，而不能分开，分步来算。

以上例子中，A和B之间的margin折叠产生的margin，是6个相邻margin折叠的结果。

分别是：

正值：50px，150px，200px

负值：-60px，-100px，-120px

根据有正有负时的计算规则，正值的最大值为 200px，负值中绝对值最大的是-120px，所以，最终折叠后的margin应该是 200 + (-120) = 80px。

<wiz_tmp_tag id="wiz-table-range-border" contenteditable="false" style="display: none;">