本文参考自https://www.jianshu.com/p/94ab59a5552e

在了解margin-collapse之前，我们首先看一下如下代码：

.block {
  height: 100px;
  background-color: pink;
}
.top {
  margin: 50px;
}
.bottom {
  margin: 100px;
}

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

top块和bottom块之间的垂直距离是多少？如果我们不知道CSS外边距折叠的存在，那么我们会认为两个div块之间的垂直距离为二者margin相加：50+100=150px，但实际运行一下代码，发现事实与我们想的不符：

我们发现二者之间的垂直距离并不是150px，而是100px，这就是传说中的CSS外边距折叠 ！

块级元素的上下外边距(margin)在某些情况下会合并（折叠）起来，合并之后的大小为较大的margin。
注意：浮动和绝对定位的元素的margin从不折叠。

什么时候发生CSS外边距折叠？

• 垂直相邻的两个元素
  所谓相邻指的是渲染之后的元素位置相邻，而不是dom结构上的相邻，也就是说如果将代码：

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

改成：

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

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

• 父元素和第一个／最后一个子元素之间
  看下面代码：

<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。

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

直接设置上方块margin-bottom: 150px，而非采用50px + 100px来实现。