CSS-外边距合并塌陷问题

共计 329 个字符，预计需要花费 1 分钟才能阅读完成。

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

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

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

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

对于两个嵌套关系（父子关系）的块元素，父元素有上外边距时子元素也有上外边距，此时父元素会塌陷较大的外边距值

解决方案

1. 可以为父元素定义上边框 border: 1px solid taransparent;
2. 可以为父元素定义上内边距 padding: 1px;
3. 可以为父元素添加 overflow: hidden;