Margin坍塌

什么是 Margin 坍塌？

块与块之间的顶部外边距和底部外边距有时候会被合并成这两个外边距的值最大的那一个，称之为 Margin 坍塌

出现于哪些情况？

• 当两个竖直方向上的边距元素相遇的时候：

假设我们有一个颜色为#ff6b6b的div位于页面上，还有一个颜色为#4e97cd的div位于这个div的下面，html和CSS代码分别如下：

HTML:

<div class="module__top"></div>
<div class="module__bottom"></div>

CSS:

.module {
  display: block;
  width: 100%;
  height: 150px;
}

.module__top {
  margin-bottom: 25px;
  background-color: #f38a6d;
}

.module__bottom {
  margin-top: 50px;
  background-color: #3bbfef;
}

效果如下图所示：

垂直方向元素坍塌问题

根据我们的直观感觉，中间这个白色的部分的高度，应该是75px，然而运行结果却是50px，较大的margin吞掉了较小的margin。

那么当一个margin是正数，另外一个是负数的时候呢？比如：

.module__top {
  margin-bottom: -25px;
  background-color: #ff6b6b;
}

.module__bottom {
  margin-top: 50px;
  background-color: #4e97cd;
}

最终的结果就是50 + (-25) = 25px

当两个值都是负数，比如-50px和-25px，那么最终的结果是-50px

• 父元素的margin遇见了它的第一/最后一个孩子的margin

CSS:

/* 父元素 */
div {
  margin: 15px;
}

/* 下面都是孩子元素 */
.red {
  background-color: #ff6b6b;
}

.orange {
  background-color: #ff9e2c;
}

.yellow {
  background-color: #eeee78;
}

.green {
  background-color: #4ecd9d;
}

.blue {
  background-color: #4e97cd;
}

.purple {
  background-color: #6c4ecd;
}

HTML:

<div class="red">
  <div class="orange">
    <div class="yellow">
      <div class="green">
        <div class="blue">
          <div class="purple">Collapsed</div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="padding red">
  <div class="padding orange">
    <div class="padding yellow">
      <div class="padding green">
        <div class="padding blue">
          <div class="padding purple">Not Collapsed</div>
        </div>
      </div>
    </div>
  </div>
</div>

运行结果：

父子CSS坍塌问题

再一次，我们应该想当然认为所有元素的margin加起来应该等于父元素和孩子元素margin的总和。但是运行结果显示，孩子元素的margin将会被父元素的margin所覆盖，父元素看起来就像一个大Boss。

通过给父元素添加1px padding或者border-top，就可以解决这个问题。

如何解决 margin 坍塌问题？

一个方向上总是使用一种margin，不要混着用，比如竖直方向上总是只使用margin-bottom，比如水平方向上总是只使用margin-left。

参考

Mastering margin collapsing
What You Should Know About Collapsing Margins
Single-direction margin declarations