什么是外边距塌陷？
外边距塌陷(margin collapsing)也称为外边距合并，是指两个在正常流中相邻(兄弟或父子关系)的块级元素的外边距，组合在一起变成单个外边距不。
只有上下外边距才会有塌陷，左右外边距不会产生这种问题。
通常会发生外边距塌陷的四种情况
- 父元素(没有上边框和上内边距)和第一个子元素，在第一个子元素之前没有内容(文本、行内元素)，同时为其定义了上外边距
<div style="margin-top:20px"> <div style="margin-top:10px">子元素</div> </div> - 父元素(没有下边框和下内边距)和最后一个子元素，在最后一个子元素之后没有内容，同时为其定义了下外边距
<div style="margin-bottom:20px"> <div style="margin-bottom:10px">子元素</div> </div> - 两个相邻的兄弟元素，分别定义了下外边距和上外边距
<div style="margin-bottom:20px">兄弟元素</div> <div style="margin-top:10px">兄弟元素</div> - 一个空的元素(没有高、边框、内边距和内容)，只定义了上下外边距
<div style="margin-bottom:20px;margin-top:10px"></div>
当出现外边距塌陷时，外边距之间的计算方式
元素的外边距可以用正数或负数来指定，使用不同的组合会改变外边距的计算方式，总共有三种组合方式：
- 两个都是正数，取较大的值
- 两个都是负数，取绝对值较大的值
- 一正一负，取两个值相加的和
总结：同号取绝对值较大的值，异号相加
