嵌套块元素垂直外边距的塌陷问题
Css:
结果图:
分析原因:对于两个嵌套关系的块元素,当子元素设置外边距,导致父元素连带向下,就会导致盒子模型塌陷。
解决方案:
1:可以为父元素定义上边框。
2:可以为父元素定义内边距。
3:可以为父元素添加overflow:hidden。(常用,前两者也会把盒子撑大)
浮动、固定、绝对定位的盒子不会出现塌陷问题
嵌套块元素垂直外边距的塌陷问题
Css:
结果图:
分析原因:对于两个嵌套关系的块元素,当子元素设置外边距,导致父元素连带向下,就会导致盒子模型塌陷。
解决方案:
1:可以为父元素定义上边框。
2:可以为父元素定义内边距。
3:可以为父元素添加overflow:hidden。(常用,前两者也会把盒子撑大)
浮动、固定、绝对定位的盒子不会出现塌陷问题