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

例如

效果

子元素并没有距离父元素100px的上边距,而父元素的上边距却变成了100px

上面的解决方案推荐第三种,给父元素设置overflow hidden,其他两种会改变盒子大小,如果已经设置了box-sizing:border-box 则可以忽略不计

box-sizing:border-box
让元素指定的宽度和高度包含 padding 和 border 。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

tips
浮动 固定 绝对定位的盒子就不会有这种塌陷的问题

标签：box,sizing,塌陷,margin,元素,100px,嵌套,宽度,border
来源： https://blog.csdn.net/Echo_cxl/article/details/113790991