外边距合并问题及解决方案

使用 margin 定义块元素的 垂直外边距 时，可能会出现外边距的合并。

主要有两种情况:  相邻块元素垂直外边距的合并 嵌套块元素垂直外边距的塌陷

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

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

解决方案：

尽量只给一个盒子添加 margin 值。

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

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。 使用 margin 定义块元素的垂直外边距时，可能会出现外边距的合并。

 

解决方案：

① 可以为父元素定义上边框。

② 可以为父元素定义上内边距。

③ 可以为父元素添加 overflow:hidden。

还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题。