深入理解CSS外边距折叠（Margin Collapse）

安宇雨 - 随手采集
2019-09-26 17:30:23
随手采集
0000-未整理-等待研究

外边距叠加一直是前端开发必须了解的一个概念，面试一般也会问到这个问题。所以整理一下相关外边距叠加相关的知识点。外边距叠加是什么？什么时候会发生外边距叠加？如何避免外边距叠加？

什么是外边距叠加

先来看看W3C对于外边距叠加的定义：

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

大概意思是：在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。

我们可以注意定义中的几个关键字：毗邻、两个或多个、垂直方向和普通流。

毗邻

毗邻说明了他们的位置关系，没有被padding、border、clear和line box分隔开。

两个或多个

两个或多个盒子是指元素之间的相互影响，单个元素不会存在外边距叠加的情况。

垂直方向

Horizontal margins never collapse.

只有垂直方向的外边距会发生外边距叠加。水平方向的外边距不存在叠加的情况。

普通流(in flow)

啥为普通流？W3C只对out of flow作了定义：

An element is called out of flow if it is floated, absolutely positioned, or is the root element.An element is called in-flow if it is not out-of-flow.

从定义中我们可以知道只要不是float、absolutely positioned和root element时就是in flow。

什么时候会发生外边距叠加

外边距叠加存在两种情况：一是父子外边距叠加；二是兄弟外边距叠加。

W3C对于什么是毗邻的外边距也有定义：

Two margins are adjoining if and only if: - both belong to in-flow block-level boxes that participate in the same block formatting context - no line boxes, no clearance, no padding and no border separate them - both belong to vertically-adjacent box edges, i.e. form one of the following pairs:
top margin of a box and top margin of its first in-flow child
bottom margin of box and top margin of its next in-flow following sibling
bottom margin of a last in-flow child and bottom margin of its parent if the parent has "auto" computed height
top and bottom margins of a box that does not establish a new block formatting context and that has zero computed "min-height", zero or "auto" computed "height", and no in-flow children

从定义中我们可以很清楚的知道要符合哪些情况才会发生外边距折叠：

都属于普通流的块级盒子且参与到相同的块级格式上下文中
没有被padding、border、clear和line box分隔开
都属于垂直毗邻盒子边缘：
- 盒子的top margin和它第一个普通流子元素的top margin
- 盒子的bottom margin和它下一个普通流兄弟的top margin
- 盒子的bottom margin和它父元素的bottom margin
- 盒子的top margin和bottom margin，且没有创建一个新的块级格式上下文，且有被计算为0的min-height，被计算为0或auto的height，且没有普通流子元素

demo1：

.parent1 {
    height: 20px;
    background: yellow;
    margin-bottom: 20px;
}
.parent2 {
    margin: 20px 0 30px;
}
.parent3 {
    height: 20px;
    background: green;
    margin-top: 20px;
}
.child {
    background: red;
    height: 20px;
    margin: 40px 0 30px;
}

<div class="parent1"></div>  
<div class="parent2">  
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>  
<div class="parent3"></div>

这个demo里的.parent2和第一个.child的top margin叠加，导致.parent1和.parent2之间的边距为40px。

demo2：

还是用上面的代码，.parent2中的.child中的top margin和bottom margin发生外边距叠加，它们之间的外边距为40px。

demo3：

还是上面的代码，.parent2中的最后一个.child发生bottom margin叠加，.parent2和.parent3之间的边距为30px。

demo4：

.demo {
    height: 30px;
    background: red;
}
.margin-test {
    margin: 20px 0 30px;
}

<div class="container">  
    <div class="demo"></div>
    <div class="margin-test"></div>
    <div class="demo"></div>
</div>

这个demo是上面的第四种情况，元素自身的外边距top和bottom发生折叠，我们可以看出.container的高度为90px，这里可以看到margin-test的top和bottom外边距发生了折叠。

如何避免外边距叠加

上面讲了外边距的叠加，那如何避免呢，其实只要破坏上面讲到的四个条件中的任何一个即可：毗邻、两个或多个、普通流和垂直方向。

W3C也对此做了总结：

Margins between a floated box and any other box do not collapse (not even between a float and its in-flow children).
Margins of elements that establish new block formatting contexts (such as floats and elements with "overflow" other than "visible") do not collapse with their in-flow children.
Margins of absolutely positioned boxes do not collapse (not even with their in-flow children).
Margins of inline-block boxes do not collapse (not even with their in-flow children).
The bottom margin of an in-flow block-level element always collapses with the top margin of its next in-flow block-level sibling, unless that sibling has clearance.
The top margin of an in-flow block element collapses with its first in-flow block-level child"s top margin if the element has no top border, no top padding, and the child has no clearance.
The bottom margin of an in-flow block box with a "height" of "auto" and a "min-height" of zero collapses with its last in-flow block-level child"s bottom margin if the box has no bottom padding and no bottom border and the child"s bottom margin does not collapse with a top margin that has clearance.
A box"s own margins collapse if the "min-height" property is zero, and it has neither top or bottom borders nor top or bottom padding, and it has a "height" of either 0 or "auto", and it does not contain a line box, and all of its in-flow children"s margins (if any) collapse.

英语不好，翻译一下：

浮动元素不会与任何元素发生叠加，也包括它的子元素
创建了BFC的元素不会和它的子元素发生外边距叠加
绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
inline-block元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
普通流中的块级元素的margin-bottom永远和它相邻的下一个块级元素的margin-top叠加，除非相邻的兄弟元素clear
普通流中的块级元素（没有border-top、没有padding-top）的margin-top和它的第一个普通流中的子元素（没有clear）发生margin-top叠加
普通流中的块级元素（height为auto、min-height为0、没有border-bottom、没有padding-bottom）和它的最后一个普通流中的子元素（没有自身发生margin叠加或clear）发生margin-bottom叠加
如果一个元素的min-height为0、没有border、没有padding、高度为0或者auto、不包含子元素，那么它自身的外边距会发生叠加

欢迎关注我们的公众号