CSS相邻块元素嵌套块元素垂直外边距合并问题

摘要

本篇讲的是当上下两个块元素相遇时,上面元素设置了下边距下面的元素设置了上边距时出现和边距合并问题，以及当元素嵌套时给子元素设置上外边距时父元素也一同往下掉问题...

1、相邻块元素垂直外边距合并问题

1.1、问题说明

当上下两个块元素相遇，上一个元素设置了下外边距，下一个设置上外边距；结果上下元素之间的垂直距离并不是两个外边距之和，而是取两个外边距值最大的哪一个作为最终距离，对较小的值进行了塌陷

1.2、解决办法

（1）、尽量只设置一个元素的外边距，且值为想要的两个元素间隔的距离和

2、嵌套块元素垂直外边距的合并问题

2.1、问题说明

当有两个嵌套关系的块元素，如果父元素没有上内边距及边框，父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中较大的，对较小的值进行了塌陷。

2.2、解决办法

（1）、可以为父元素定义上边框；

（2）、可以为父元素定义上内边距；

（3）、可以为父元素添加overflow: hidden;

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