深入CSS之外边距折叠(margin collapse)详解

什么是外边距折叠

准确来说，外边距折叠应该叫垂直外边距折叠，因为只会发生在垂直方向上，而水平方向上不会发生。

对于以下简单的html代码和css代码， 请问top块和bottom块之间的垂直间距是多少px?

<div class="container">
  <div class="block top"></div>
  <div class="block bottom"></div>
</div>

.block {
  width: 100px;
  height: 100px;
  background-color: lightgray;
}
.top {
  margin-bottom: 20px;
}

.bottom {
  margin-top: 30px;
}

如果你不了解外边距折叠，那么你会认为：
间距 = top块的margin-bottom + bottom块的margin-top
　　＝20px + 30px = 50px

然而实际情况是:

这就是（垂直）外边距折叠。

外边距折叠的定义：
The top and bottom margins of blocks are sometimes combined (collapsed) into a single margin whose size is the largest of the individual margins (or just one of them, if they are equal), a behavior known as margin collapsing. Note that the margins of floating and absolutely positioned elements never collapse.
翻译过来就是：
块级元素的上下外边距(margin)在某些情况下会合并（折叠）起来，合并之后的大小为较大的margin。注意浮动和绝对定位的元素的margin从不折叠。

发生外边距折叠的条件是什么

1.（垂直方向上）相邻的两个元素
这种情况很好理解，就是上面的例子中给出的情况。这里要注意一点，所谓相邻指的是渲染之后的元素位置相邻，而不是dom结构上的相邻，也就是说如果将代码：

<div class="container">
  <div class="block top"></div>
  <div class="block bottom"></div>
</div>

改成

<div class="container">
  <div>
    <div class="block top"></div>
  </div>
  <div class="block bottom"></div>
</div>

虽然加了一层div包裹，但是仍然会发生外边距折叠。

2.父元素和第一个／最后一个子元素之间
考虑以下代码：

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

.parent {
  margin-top: 30px;
}

.child {
  margin-top: 20px;
  width: 50px;
  height: 50px;
  background-color: lightgray;
}

parent块有margin-top: 30px;child块有margin-top: 20px;，那么第一个子元素距离最上面的距离是50px吗？不是，由于有外边距折叠的存在，折叠后的距离为30px。

外边距折叠后的大小

1.两个相同大小的正数：取某个外边距的值。即30px与30px发生折叠，折叠后的值为30px。
2.两个不同大小的正数：取较大的外边距的值。即30px与20px发生折叠，折叠后的值为30px。
3.一正一负：取正数与负数的和。即30px与-20px发生折叠，折叠后的值为10px。
4.相同大小的负数：同相同大小正数。-30px与-30px折叠，折叠后为-30px。
5.不同大小负数： 取绝对值较大的负数。-30px与-20px折叠，折叠后为-30px。

如果我希望不发生外边距折叠，该怎么做

1.曲线救国，如果你希望垂直方向上两个块间距为50px，可以通过设置上方块margin-bottom: 50px;而非采用30px + 20px;来实现。
2.根据BFC（block formatting context）块级格式化上下文来阻止外边距折叠。你可以试着将本文给出的第一个例子中的top块设置：display: inline-block;来形成BFC。这样就不会再发生外边距折叠了。我在实验中发现，在设置了display:inline-block之后，期望的间距为50px，但是实际情况如下：

发现竟然是54px，那么多出来的4px是哪来的？该如何处理掉多余的4px？这里先不做解释，留个坑，在另一篇文章《inline-block产生的看不见的空间》里解释。至于如何处理，只需要在container上加上font-size: 0;即可,就会得到我们想要的50px。