解决父、子元素之间margin-top无效的问题

给子元素一个垂直外边距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>

解决后的效果