-
兄弟元素合并：當(dāng)一個(gè)元素出現(xiàn)在另一個(gè)元素上面時(shí)，第一個(gè)元素的下外邊距與第二個(gè)元素的上外邊距會(huì)發(fā)生合并
360截圖20161129201348082.jpg -
父子間合并：當(dāng)一個(gè)元素包含在另一個(gè)元素中時(shí)（假設(shè)沒有內(nèi)邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會(huì)發(fā)生合并。
-
空元素：假設(shè)有一個(gè)空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會(huì)發(fā)生合并
如果這個(gè)外邊距遇到另一個(gè)元素的外邊距，它還會(huì)發(fā)生合并：
如何合并： - 兩個(gè)相鄰的外邊距都是正數(shù)時(shí)，合并結(jié)果是它們兩者之間較大的值。
- 兩個(gè)相鄰的外邊距都是負(fù)數(shù)時(shí)，合并結(jié)果是兩者絕對(duì)值的較大值。
- 兩個(gè)外邊距一正一負(fù)時(shí)，合并結(jié)果是兩者的相加的和。
解決辦法： - 對(duì)于兄弟元素：設(shè)置浮動(dòng)，display：inline-block或使其父元素均形成BFC可防止邊距合并（如overflow:hidden）
- 對(duì)于父子間的元素：可以給父元素設(shè)置border或padding屬性來防止合并。
- 對(duì)于空元素：設(shè)置border或padding屬性或overflow：hidden等（形成BFC）來防止合并。
在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
推薦閱讀更多精彩內(nèi)容
- 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
- 1. 在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例 外邊距合并：外...
- 1.在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例 概念：在CSS當(dāng)...
- 一，浮動(dòng)元素有什么特征？對(duì)父容器、其他浮動(dòng)元素、普通元素、文字分別有什么影響? 浮動(dòng)模型是一種可視化格式模型，浮動(dòng)...
- 一、在什么場景下會(huì)出現(xiàn)外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個(gè)父子外邊距合并的范例 在CSS當(dāng)中，相...
