解决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;
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018-04-03)，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读