w3h5

解决margin击穿的几种方法

前端开发过程中经常会遇到这种问题,明明设置的是子元素的margin值,结果却作用在了父元素上,例如的代码:

HTML部分:嵌套两层div

<div class="box">
    <div class="inner">
        margin击穿
    </div>
</div>

style/css部分:给元素设置宽高和背景,便于观察,给内部的自元素设置一个 100px 的上边距。

.box{
    margin: 0 auto;
    background: red;
    width: 500px;
    height: 300px;
}
.inner{
    margin-top: 100px;
    background: green;
    color: #FFF;
    width: 200px;
    height: 100px;
}

我明明只设置了子元素 .inner 的 margin 值,结果这个 100px 的 margin-top 却作用在了父元素 .box 上,运行结果如下图,这就是所谓的margin击穿。

1.png 解决margin击穿的几种方法 经验总结

margin 击穿就是两个元素嵌套,哪个 margin 较大则哪个生效。

解决 margin 击穿的方法有以下几种:

1、给父元素加一个边框

.box{
    1px solid #000;
}

缺点:会多一个边框,不可取。

2、在父元素添加 overflow:auto; (推荐) 或者 overflow:hidden;

.box{
    overflow:auto;
}

3、给子元素设置 display:inline-block;

.inner{
    display:inline-block;
}

4、给子元素设置浮动再清除浮动,太麻烦,不推荐。

.inner{
    float:laft;
}
.box::after{
    content: '';
    display: block;
    clear: both;
}


赞 (0)
分享到: +More |

评论 沙发

换个身份