关于CSS学习中出现的外边距合并问题

外边距合并分为两种情况

---

1.相邻块元素垂直外边距的合并

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

                                           可见我为两个块元素都赋予了20px的边距。

运行结果：

   

          运行结果并不是两边距叠加40px，而是20px，可见发生了相邻块元素垂直外边距的合并。

解决方案：尽量只给一个盒子添加margin值。

---

2.嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的边距值。这种现象被称为嵌套块元素垂直外边距的塌陷。

                                可见我为父元素赋予了20px边距，为子元素赋予了30px边距

运行结果：

   运行结果边距为30px，取了父子元素中边距的较大值，可见发生了嵌套块元素垂直外边距的塌陷

解决方案：

1. 可以为父元素定义上边框。
2. 可以为父元素定义上内边距。
3. 可以为父元素添加overflow：hidden。