CSS中父子元素间的外边距塌陷（外边距合并）

为什么会外边距合并

子元素的margin-top找不到作为参考边界的父元素的border或者padding，就会与父元素的margin-top重叠。

外边距塌陷被设计出来的初衷

如图，若没有外边距塌陷，那么会出现垂直边距为20px和10px的情况，而存在塌陷后就可以使整个布局更加统一。它被设计出来解决垂直边距问题，这也是为什么只有垂直方向会存在外边距塌陷。

解决方法

根本原因是父元素缺乏了border，所以只要解决这个问题就可以解决外边距塌陷的问题。
1、为父元素添加border或padding
2、为父元素添加overflow: hidden
3、采用相对定位或绝对定位
4、采用float
等等