css外边距叠加问题，即垂直方向margin合并

外边距叠加（合并）是指两个或多个包含或相邻的普通文档流的块元素在垂直方向上的边距（margin）会重叠在一起（即发生合并），重叠后的外边距大小等于这几个外边距中值较大的那个。

示例1：

<div class="parent-box">
  <div class="box"></div>
</div>

.parent-box {
  width: 200px;
  height: 200px;

  margin-top: 10px;
}
.box {
  width: 100px;
  height: 100px;

  margin-top: 20px;
}

父元素与子元素（均为普通文档流的块元素），父元素上边距（margin-top: 10px），子元素上边距（margin-top: 20px）。

表现结果：

最终外边距体现在父元素上，且外边距大小为20px。

示例2：

<div class="box">
  <div class="child-box child-box-1"></div>
  <div class="child-box child-box-2"></div>
</div>

.box {
  width: 300px;
  height: 300px;
}
.child-box {
  width: 100px;
  height: 100px;
}
.child-box-1 {
  margin-bottom: 10px;
}
.child-box-2 {
  margin-top: 20px;
}

父元素包含2个子元素（均为普通文档流的块元素），第1个子元素下边距（margin-bottom: 10px），第2个子元素上边距（margin-bottom: 20px）。

表现结果：

最终在两个子元素之间产生大小为20px的边距。

解决方案：

其实这应该理解为一个设计问题。从设计层面来说，在示例1中父子都存在上外边距，示例2中上下2个子元素分别存在上外边距、下外边距是不应该的，可以处理成父元素的内边距加上子元素的外边距、单个元素的外边距。

如果确实存在这样的设计需求，则可以给元素添加透明或与背景颜色相同的上边框（border-top）或下边框（border-bottom)，或者添加上内边距（padding-top)或下内边距（padding-bottom）。

在示例1中，还可设置父元素的 css 的 overflow 属性为 auto / hidden / scroll，以使浏览器展现出预期效果。