外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。
合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
外邊距合併(疊加)是一個相當簡單的概念。但是,在實踐中對網頁進行布局時,它會造成許多混淆。
簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
當一個元素出現在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖:
當一個元素包含在另一個元素中時(假設沒有內邊距或框線把外邊距分隔開),它們的上和/或下外邊距也會發生合併。請看下圖:
儘管看上去有些奇怪,但是外邊距甚至可以與自身發生合併。
假設有一個空元素,它有外邊距,但是沒有框線或填充。在這種情況下,上外邊距與下外邊距就碰到了一起,它們會發生合併:
如果這個外邊距遇到另一個元素的外邊距,它還會發生合併:
這就是一系列的段落元素占用空間非常小的原因,因為它們的所有外邊距都合併到一起,形成了一個小的外邊距。
外邊距合併初看上去可能有點奇怪,但是實際上,它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等於段落的上外邊距。如果沒有外邊距合併,後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合併,段落之間的上外邊距和下外邊距就合併在一起,這樣各處的距離就一致了。
注釋:只有普通文檔流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併。