Margin 重叠（Margin Collapse） 是块级元素垂直方向外边距合并的现象。以下通过 典型示例 和 解决方案 详细说明

场景示例

1. 场景一
   两个上下并列结构的结构，如果给上面的盒子添加了margin-bottom，给下面的盒子添加了margin-top,期望的解析是两者垂直距离之和，实际上的情况是会按照最大值解析。

.child1, .child2 {
  width: 200px;
  height: 100px;
  background: yellow;
  border: 1px solid black;
}
.child1 {
    margin-bottom: 20px;
}
.child2 {
    margin-top: 20px;
}

<div class="child1"></div>
<div class="child2"></div>

解决办法

方法一

触发BFC，给下面的盒子添加父元素，并且声明overflow: hidden;

方法二

在两个元素之间添加BFC
<div style="display:flow-root"></div>

方法三

用padding代替margin

2. 场景二
   父子元素的margin-top会选取最大值，而不是二者相加

.parent1 {
  margin-top: 10px;
}
.child1 {
  margin-top: 100px;
}
<div class="parent1">
  <div class="child1"></div>
</div>

解决办法

• 父元素添加边框(border)
• 父元素添加内边距(padding)
• 父子元素之间存在行内元素<span>,匿名元素
  ...