margin塌陷问题

一：什么是margin塌陷

在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者padding
margin直接接触，就产生了合并
表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象

二：margin塌陷的分类

1、兄弟关系的盒子
2、父子关系的盒子

父子关系的盒子塌陷

<div class="onBox">
    <div class="underBox"></div>
    </div>
</body>
*{
    margin: 0;
    padding: 0;
}
.onBox{
    width: 100px;
    height: 100px;
    background: cadetblue;
    margin-top: 100px;
    margin-left: 100px;    /*border-top: 1px solid transparent;*/
    /*padding-top: 1px;*/
    /*overflow: hidden;*/
    /*position: absolute;*/
    /*position: fixed;*/
    /*display: inline-block;*/}
.underBox{
    width: 50px;
    height: 50px;
    background: aquamarine;
    margin-top: 30px;
    margin-left: 30px;
}

理想的结果：子盒子与父盒子有30px的margin

image.png

实际结果：父子margin重叠了，用了大的margin（100px）

image.png

三：解决方案

• 给父元素添加透明边框，至少添加border-top:1px solid transparent

• 给父元素添加padding-top:npx

• 给父元素添加overflow:hidden

• 给父元素添加position: absolute;

• 给父元素添加position: fixed;

• 给父元素添加display: inline-block;

作者：椰果粒
链接：https://www.jianshu.com/p/911c3d50873d