詳解css邊距重疊的幾種解決方案
發(fā)布時間：2017-09-06 17:00:31 作者：muzishuiji 
我要評論
我要評論本篇文章主要介紹了詳解css邊距重疊的幾種解決方案，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
今天整理了一下用css防止邊距重疊的幾種方法
先假設一組dom結構
<div class="parent">
<div class="child">
</div>
</div>
通常情況下，如果給子元素設置margin,就會產(chǎn)生這個屬性對父元素也產(chǎn)生了同樣的效果，然而
這其實不是我們想要的結果，我們只想對子元素設置margin，那么現(xiàn)在我們應該怎么做呢？
（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；（如果子元素是行內(nèi)元素或者行內(nèi)塊級元素則不會產(chǎn)生邊距重疊的問題）
.parent {
width: 300px;
height: 300px;
}
.child {
width: 200px;
height: 200px;
margin: 20px;
display: inline-block;
}
（6）使子元素脫離文檔流這個實現(xiàn)的方法有很多，浮動，絕對定位等，這里我就不做具體的解釋了。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了解決margin 外邊距合并問題 ,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-03- 這篇文章主要介紹了詳解CSS外邊距折疊引發(fā)的問題的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-27
外邊距折疊指的是毗鄰的兩個或多個外邊距 (margin) 會合并成一個外邊距，本文詳細的介紹了一下css外邊距折疊的實現(xiàn)，分為3種情況，非常具有實用價值，需要的朋友可以參考下2018-10-30- 這篇文章主要介紹了簡單的CSS疊加外邊距示例,是文檔樣式編寫中一個需要注意的地方,需要的朋友可以參考下2015-07-21
css控制邊界與邊框示例(內(nèi)邊距、外邊距使用方法)
這篇文章主要介紹了css控制邊界與邊框示例,需要的朋友可以參考下2014-04-15- 今天就先說說CSS的外邊距吧。 圍繞在元素邊框的空白區(qū)域是外邊距。這是W3CSchool給我們的解釋。這句話看起來很模糊，說的不是那么明確2012-05-27
- 空白雙邊距是一個極容易誤解的CSS特性.它不是CSS的bug,但如果我們一旦誤解,將會給你帶來很多麻煩.2010-07-04
- 網(wǎng)頁制作Webjx文章簡介：今天談談CSS外邊距疊加的問題，邊距合并指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。 在進行CSS網(wǎng)頁布局時會遇到2009-04-02
這篇文章主要介紹了CSS 外邊距(margin)重疊及防止方法,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-14
