css塌陷问题 外边距合并问题

CSS塌陷问题分为俩种

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

问题描述：当上下相邻的俩个块元素相遇时，如果上面的元素有marigin-bottom，下面的元素有maring-top，则他们之间的垂直间距不是marigin-bottom + margin-top的和，而是取俩个值中的较大者。

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

示例：如下图所示俩个div虽然都分别设置了下外边距和上外边距，但是他们之间的间距是60px

2 嵌套关系的垂直外边距合并问题（塌陷）

问题描述：对于嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，取俩者外边距中的较大值成为父元素的外边距，子元素保持不动。

解决方案
1 给父元素添加上外边框 border-top: 1px solid transparent;
2 给父元素一个上padding值 padding-top: 1px;
3 给父元素添加overflow:hidden；

示例：

1 下面代码中只给父元素设置了上外边距80px
2 在给子元素设置了上外边距100px后，子元素和父元素之间并没有产生100px的间距，而是父元素的上外边距变成了100px，这种现象则成为塌陷现象
3 在给父元素设置overflow后，就可以解决塌陷现象。父元素的上外边距恢复成了80px，子元素的上外边距也变成了100px，这样父元素和子元素之间的100px边距就出来了。（不用overflow的话也可以用上面解决方案中另外俩种方法）