兩個或多個塊級盒子的垂直相鄰邊界會重合。結(jié)果的邊界寬度是相鄰邊界寬度中最大的值。如果出現(xiàn)負(fù)邊界，則在最大的正邊界中減去絕對值最大的負(fù)邊界。如果沒有正邊界，則從零中減去絕對值最大的負(fù)邊界。注意：相鄰的盒子可能并非是由父子關(guān)系或同胞關(guān)系的元素生成。

但是邊界的重疊也有例外情況：

1、水平邊距永遠(yuǎn)不會重合。

2、在規(guī)范文檔中，2個或以上的塊級盒模型相鄰的垂直margin會重疊。最終的margin值計算方法如下：

a、全部都為正值，取最大者；

b、不全是正值，則都取絕對值，然后用正值減去最大值；

c、沒有正值，則都取絕對值，然后用0減去最大值。

注意：相鄰的盒模型可能由DOM元素動態(tài)產(chǎn)生并沒有相鄰或繼承關(guān)系。

3、相鄰的盒模型中，如果其中的一個是浮動的（float），垂直margin不會重疊，并且浮動的盒模型和它的子元素之間也是這樣。

4、設(shè)置了overflow屬性的元素和它的子元素之間的margin不被重疊（overflow取值為visible除外）。

5、設(shè)置了絕對定位（position:absolute）的盒模型，垂直margin不會被重疊，并且和他們的子元素之間也是一樣。

6、設(shè)置了display:inline-block的元素，垂直margin不會重疊，甚至和他們的子元素之間也是一樣。

7、如果一個盒模型的上下margin相鄰，這時它的margin可能重疊覆蓋（collapse through）它。在這種情況下，元素的位置（position）取決于它的相鄰元素的margin是否重疊。

a、如果元素的margin和它的父元素的margin-top重疊在一起，盒模型border-top的邊界定義和它的父元素相同。

b、另外，任意元素的父元素不參與margin的重疊，或者說只有父元素的margin-bottom是參與計算的。如果元素的border-top非零，那么元素的border-top邊界位置和原來一樣。

一個應(yīng)用了清除操作的元素的margin-top絕不會和它的塊級父元素的margin-bottom重疊。

注意，那些已經(jīng)被重疊覆蓋的元素的位置對其他已經(jīng)重疊的元素的位置沒有任何影響；只有在對這些元素的子元素定位時，border-top邊界位置才是必需的。

8、根元素的垂直margin不會被重疊。

外邊距(margin)重疊示例

外邊距重疊是指兩個垂直相鄰的塊級元素，當(dāng)上下兩個邊距相遇時，起外邊距會產(chǎn)生重疊現(xiàn)象，且重疊后的外邊距，等于其中較大者。

為了幫助大家讓學(xué)習(xí)變得輕松、高效，給大家免費分享一大批資料，幫助大家在成為前端工程師，乃至全棧工程師的路上披荊斬棘。在這里給大家推薦一個前端全棧學(xué)習(xí)交流圈：784783012 歡迎大家進(jìn)群交流討論，學(xué)習(xí)交流，共同進(jìn)步。

當(dāng)真正開始學(xué)習(xí)的時候難免不知道從哪入手，導(dǎo)致效率低下影響繼續(xù)學(xué)習(xí)的信心。

但最重要的是不知道哪些技術(shù)需要重點掌握，學(xué)習(xí)時頻繁踩坑，最終浪費大量時間，所以有效資源還是很有必要的。

圖示：

另一個重疊現(xiàn)象是當(dāng)一個元素包含在另一個元素之中時，子元素與父元素之間也會產(chǎn)生重疊現(xiàn)象，重疊后的外邊距，等于其中最大者：

同理，如果一個無內(nèi)容的空元素，其自身上下邊距也會產(chǎn)生重疊。

外邊距重疊的意義

外邊距的重疊只產(chǎn)生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規(guī)則，其實有其現(xiàn)實意義。設(shè)想，當(dāng)我們上下排列一系列規(guī)則的塊級元素（如段落P）時，那么塊元素之間因為外邊距重疊的存在，段落之間就不會產(chǎn)生雙倍的距離。

防止外邊距重疊解決方案：

雖然外邊距的重疊有其一定的意義，但有時候我們在設(shè)計上卻不想讓元素之間產(chǎn)生重疊，那么可以有如下幾個建議可供參考：

1. 外層元素padding代替
2. 內(nèi)層元素透明邊框 border:1px solid transparent;
3. 內(nèi)層元素絕對定位 postion:absolute:
4. 外層元素 overflow:hidden;
5. 內(nèi)層元素 加float:left;或display:inline-block;
6. 內(nèi)層元素padding:1px;

 總結(jié)

以上所述是小編給大家介紹的CSS 外邊距(margin)重疊及防止方法,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

最新評論