手记

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


4人推荐
随时随地看视频
慕课网APP