css拓展--盒子外边距塌陷/合并问题及其解决方法_在css盒子模型中,如何解决外边距合并及塌陷问题?-CSDN博客

本文详细介绍了CSS中盒子外边距塌陷与合并的现象，并提出了相应的解决方法。通过设置边框、触发BFC、改变浮动和定位等方式，可以有效地避免外边距塌陷和合并问题，确保元素间距符合预期。

什么叫做外边距塌陷

当两个嵌套关系块级元素，若父元素设置上外边距或者没有设置上外边距（margin-top），子元素设置上外边距时，两个上外边距会发生合并，且值为相对较大的上外边距值。

示例：

<style>
    .box1{
        width: 200px;
        height: 200px;
        background-color: aqua;
        margin-top: 50px;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: aquamarine;
        margin-top: 100px;
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

页面渲染效果：