给子元素一个垂直外边距margin-top，我们希望的是元素和父元素之间产生相应的间隙。然而有的时候并不是我们希望的这样，反而父元素会往下走margin-top的值，我们先看下出问题的代码。
<div class="parent">
<div class="child">child</div>
</div>
.parent {
width: 400px;
height: 400px;
background: #d7d7d7;
}
.child {
margin-top: 50px;
width: 100px;
height: 100px;
background: deepskyblue;
}
问题现象
父、子元素之间没有出现我们希望的50px间隙。这种问题多出现在给元素的第一个子元素添加margin-top时。解决此问题的方法不少，最推荐的是给父元素添加overflow:hidden样式，具体如下。
<div class="parent" style="overflow:hidden">
<div class="child">child</div>
</div>
解决后的效果
网友评论