详解margin坍塌与合并

在网页布局中，有时需要设置css外边距（margin）, 但是会出现css外边距合并（即重叠）的情况。

外边距塌陷 – 父子元素叠加

现象

css外边距塌陷是指两个垂直相邻的块级父子元素，当上下两个边距相遇时，外边距会产生重叠的现象，且重叠后的外边距等于其中较大者。

• 如果一方有margin-top，则父子盒子一起有同样值上外边距；
• 如果两方都有margin-top，则父子盒子取较大值的上边距；

效果图如下：

解决方法

• 给父元素加边框 border（值可以是1px）（不推荐）
• 给父元素加内边距 padding（值可以是0.02px，或者直接设置以达到想要 的效果）（不推荐）
• 父元素触发 BFC(推荐)

BFC：Block Formatting Context，块级格式化上下文，BFC决定了元素对其内容定位，以及当前元素与其他元素之间的关系和相互作用。其目的就是形成一个独立的空间，让空间中的子元素不会影响到这个独立空间之外的布局。这样我们在写页面的时候就可以根据自己的需求，选择一些比较合适的解决方案。

小结触发BFC方法：

• 子元素或者父元素的float不为none，即为left或right
• 子元素或者父元素的position不为relative或static，即为absolute或fixed
• 父元素的overflow为auto，scroll或hidden
• 父元素的display的值为flex，inline-block，table-cell或table-caption

外边距合并 – 相邻元素叠加

现象

这个比较好理解， 相邻的两个元素， 如果它们的上下边距相遇，即会产生叠加。

这种现象发生在两个并列的元素之间。给一个元素设置下外边距（margin-bottom），并同时给一个元素设置上外边距（margin-top）。两个元素之间的距离不等于这两个外边距之和，而是等于其中最大的一个外边距。

• 若值相同，则其中一个margin会不起作用；
• 若值不同，则只有值较大的会起作用；

效果图如下：

解决方法

• 只设置其中一个值就可以了(推荐)

在实际的开发中，可以根据自己的需求，设置其中一个元素的margin相加的值即可。比如本例中，可以设置第一个元素的margin-bottom的值而不设置第二个元素的margin-top值。反之亦然。

• 给每个要设置外边距的元素，套上一个触发 BFC 的 父元素(不推荐)

<div class="wrap">
	<div class="top"></div>
</div>
<div class="wrap">
	<div class="tottom"></div>
</div>

.wrap {
    overflow: hidden;
}
.top {
    width: 200px;
    height: 200px;
    background: red;
    margin-bottom: 50px;
}
.tottom {
    width: 200px;
    height: 200px;
    background: black;
    margin-top: 30px;
}

添加父元素，会改变html的搭配结构，所以这种方式不是很推荐大家使用。