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的话也可以用上面解决方案中另外俩种方法)