給子元素一個(gè)垂直外邊距margin-top，我們希望的是元素和父元素之間產(chǎn)生相應(yīng)的間隙。然而有的時(shí)候并不是我們希望的這樣，反而父元素會(huì)往下走margin-top的值，我們先看下出問(wèn)題的代碼。

<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;
}

問(wèn)題現(xiàn)象

父、子元素之間沒(méi)有出現(xiàn)我們希望的50px間隙。這種問(wèn)題多出現(xiàn)在給元素的第一個(gè)子元素添加margin-top時(shí)。解決此問(wèn)題的方法不少，最推薦的是給父元素添加overflow:hidden樣式，具體如下。

<div class="parent" style="overflow:hidden">
    <div class="child">child</div>
</div>

解決后的效果