給子元素一個垂直外邊距margin-top晓褪,我們希望的是元素和父元素之間產(chǎn)生相應的間隙。然而有的時候并不是我們希望的這樣扎筒,反而父元素會往下走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;
}
問題現(xiàn)象
父嗜桌、子元素之間沒有出現(xiàn)我們希望的50px間隙奥溺。這種問題多出現(xiàn)在給元素的第一個子元素添加margin-top時。解決此問題的方法不少骨宠,最推薦的是給父元素添加overflow:hidden樣式谚赎,具體如下淫僻。
<div class="parent" style="overflow:hidden">
<div class="child">child</div>
</div>
解決后的效果