Margin 重叠（Margin Collapse）  是指当两个或多个垂直方向（上下）的块级元素的 margin 相遇时，它们会合并成一个 margin，其大小为两者中较大的那个值。

这个特性只发生在标准文档流中的垂直方向，水平方向的 margin 不会重叠。

发生场景

主要有三种情况：

1. 相邻兄弟元素
两个上下相邻的兄弟元素，它们之间的垂直间距不是 上margin-bottom + 下margin-top，而是取两者的最大值。

<style>
  .box1 { margin-bottom: 30px; }
  .box2 { margin-top: 20px; }
</style>
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>

最终两个盒子之间的距离是 30px（max(30px, 20px)），而不是 50px。

2. 父子元素（第一个/最后一个子元素）

<style>
  .parent { margin-top: 30px; background: #eee; }
  .child { margin-top: 20px; height: 50px; background: #ccc; }
</style>
<div class="parent">
  <div class="child">Child</div>
</div>

视觉上，父元素和子元素会一起贴着顶部，它们之间的顶部间距是 30px（取最大值），看起来像是父元素的 margin-top 被子元素“偷走”了。

3. 空的块级元素
如果一个块级元素没有内容、边框、内边距或高度，那么它自身的 margin-top 和 margin-bottom 会重叠。

如何解决 Margin 重叠？

<style>
  .parent {
    margin-top: 30px;
    background: #eee;
    /* 任选一种创建BFC的方法 */
    overflow: hidden; /* 或 auto */
    /* 或者 */
    display: flow-root; /* 无副作用，最佳实践 */
  }
  .child {
    margin-top: 20px;
    height: 50px;
    background: #ccc;
  }
</style>
<div class="parent">
  <div class="child">Child</div>
</div>

现在，父元素的 margin-top 是 30px，子元素的 margin-top 是 20px，两者不再重叠，总的上边距为 50px。

​3. 使用内联元素隔断