外邊距坍塌（margin collapsing）是指兩個元素緊挨著時，兩個外邊距會縮小到乙個外邊距，這個詞在《精通css》（第2版）這本書中也被稱為「外邊距疊加」。這個現象只會發生在normal flow布局中，不會發生在絕對定位布局和浮動布局。（詳情可參看css學習筆記——布局）
上下兩個元素外邊距接壤時，下面的元素會上移。他們之間的距離（邊框到邊框）會坍塌到乙個外邊距x，這個外邊距x是兩個外邊距的較大值。
下面看乙個例項
html5中head body標籤可以省略
class="test1">class test1
class="test2">class test2
"stylesheet"
type=
"text/css" href="test.css">
.test1
.test2
backgroud-color顯示的區域由內邊距padding決定。外邊距margin無顏色設定。
如果父元素沒有內邊距和邊框，即父子元素之間沒有緩衝的東西阻擋一下，那麼子元素的外邊距就會坍塌。在下面例子中，兩處css都注釋掉，會出現上面那張圖；如果放開任乙個注釋，那麼就會出現中間那張圖；如果父元素有上內邊距沒有下內邊距，那麼就會出現不對稱坍塌的情況，上面不坍塌，下面坍塌，正如下面那張圖。
在《精通css》（第二版）的第42頁中，文中說空元素（無內容、邊框、內邊距）會自身坍塌，但經過試驗，發現空div元素不會自身坍塌。
外邊距坍塌這個現象很奇怪，為什麼會有這麼乙個隱含的潛規則呢，《精通css》中給出了乙個應用場景：在文章中，如果沒有外邊距坍塌作用，那麼第一段的上邊距會顯得跟其他段落間距不一致。
1. 《精通css》（第2版）
解決外邊距坍塌的幾種方法
外邊距坍塌的三種情況及其解決方法 同級相鄰元素 空塊元素 fc的全稱是 formatting contexts，是w3c css2.1規範中的乙個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。bfc其全英文拼寫為 block form...
CSS外邊距合併 重疊 學習筆記
當兩個垂直外邊距相遇時，它們將形成乙個外邊距。劃重點 垂直外邊距。水平的不可以。外邊距，只有margin。相鄰的盒子，可以是兄弟關係也可能是祖先關係，甚至可以與自身發生合併。祖先關係合併的條件是，沒有內邊距或邊框把外邊距分隔開。行內元素 浮動元素或絕對定位之間的外邊距不會合併。w3c詳解 重疊結果遵...
CSS 外邊距（十三）
css 外邊距 margin 屬性定義元素周圍的空間。css 邊距屬性定義元素周圍的空間。可以用用負值對內容進行疊加。通過使用單獨的屬性，可以對上 右 下 左的外邊距進行設定。也可以使用簡寫的外邊距屬性同時改變所有的外邊距。大多數正常流元素間出現的間隔都是因為存在元素的外邊距。設定外邊距會在元素外建...