CSS外边距塌陷问题分析及解决方法

概念：

外边距塌陷也称为外边距合并 是指两个在正常流中相邻（兄弟或父子关系）的块级元素的外边距 组合在一起变成单个外边距
不过只有上下外边距才会有塌陷 左右外边距不会出现这种问题

对于两个嵌套关系的块元素 如果父元素没有上内边距（padding）或边框（border） 则父元素的上外边距会与子元素的上外边距发生合并 合并后的外边距为两者中的较大者
因此可以整理出——

当外边距塌陷时外边距之间的计算方式：

1、若两个值都是正数 则取较大的值
2、若两个值都是负数 则取绝对值较大的值
3、若一正一负 则取两个值的和

---

相邻块元素垂直外边距的合并：
当上下相邻的两个块元素相遇时 如果上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-top 则他们之间的垂直间距不是margin-bottom与margin-top之和 而是两者中的较大者
这种现象被称为相邻块元素垂直外边距的合并（也称