外邊距合并指的是：當兩個垂直外邊距相遇時，它們將形成一個外邊距。
合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。
當一個元素出現在另一個元素上面時，第一個元素的下外邊距與第二個元素的上外邊距會發生合并。
當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合并。
情況
外邊距也可以與自身發生合并。
假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合并。
如果這個外邊距遇到另一個元素的外邊距，它還會發生合并：
注意：只有普通文檔流中塊框的垂直外邊距才會發生外邊距合并。行內框、浮動框或絕對位置之間的外邊距不會合并。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>消除外邊距疊加</title> <style type="text/css"> .wrap{ width: 200px; height: 200px; margin-top: 30px; background-color: red; } .inner{ width: 100px; height: 100px; margin-top: 20px; background-color: blue; } </style></head><body><p class="wrap"> <p class="inner"></p></p></body></html>
從可以明顯看出父元素和子項目的上外邊距發生了合并，兩者的上邊框發生了重疊。我們都知道合并後的外邊距的高度等於兩個發生合并的外邊距的高度中的較大者。但是這裡還要注意的是：合并後的外邊距是加在了父元素上，這一點從父元素和子項目上邊框重合就可以看出來。
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>消除外邊距疊加</title> <style type="text/css"> .wrap{ width: 200px; height: 200px; margin-top: 30px; background-color: red; } .inner{ width: 100px; height: 100px; margin-top: 20px; background-color: blue; //浮動子項目消除外邊距合并 float: left; //絕對位置消除 /*position: absolute;*/ //設定子項目為行內塊元素 /*display: inline-block;*/ //上面三種方式任意一種都可以消除外邊距合并 } </style></head><body><p class="wrap"> <p class="inner"></p></p></body></html>
消除外邊距合并之後的情況：
相關推薦：
CSS外邊距合并的問題及解決措施
CSS基礎學習十五:盒子模型補充之外邊距合并
css的外邊距合并(如何?不合并)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
