css邊距重疊的解決方案

慢思考快行動發表於2017-09-02
CSS

**

css防止邊距重疊的方法

**

今天整理了一下用css防止邊距重疊的幾種方法
先假設一組dom結構

<div class="parent">
    <div class="child">
    </div>
</div>

通常情況下，如果給子元素設定margin,就會產生這個屬性對父元素也產生了同樣的效果，然而
這其實不是我們想要的結果，我們只想對子元素設定margin，那麼現在我們應該怎麼做呢？
（1） 給父元素設定邊框

.parent { 
    width: 300px;       
    height: 300px;
    border: 1px solid #ccc;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

（2）給父元素新增padding

.parent {
    padding： 1px;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

（3）在子元素上方加一個有寬高的兄弟元素，記住是有寬高的。

<div class="parent">
     <div style="width: 20px;height: 20px;margin-top: "></div>
     <div class="child">
     </div>
</div>

（4）給父元素設定 overflow: hidden; 屬性

.parent {
    overflow: hidden;
    width: 300px;
    height: 300px;
}
.child {
    width: 200px;
    height: 200px;
    margin: 20px;
}

（5）給子元素設定 display: inline-block；（如果子元素是行內元素或者行內塊級元素則不會產生邊距重疊的問題）

.parent {
    width: 300px;
    height: 300px;
} 
.child {
    width: 200px;
    height: 200px;
    margin: 20px; 
    display: inline-block;
}

（6）使子元素脫離文件流這個實現的方法有很多，浮動，絕對定位等，這裡我就不做具體的解釋了。
希望可以能幫助到需要的人，如果你覺得這個文章幫到你了，就麻煩動動小手點個贊吧！嘿嘿

相關文章