外邊距合并指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。
合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
外邊距合并
外邊距合并(疊加)是一個相當簡單的概念。但是,在實踐中對網頁進行布局時,它會造成許多混淆。
簡單地說,外邊距合并指的是,當兩個垂直外邊距相遇時,它們將形成一個外邊距。合并后的外邊距的高度等于兩個發生合并的外邊距的高度中的較大者。
當一個元素出現在另一個元素上面時,第一個元素的下外邊距與第二個元素的上外邊距會發生合并。請看下圖:
當一個元素包含在另一個元素中時(假設沒有內邊距或邊框把外邊距分隔開),它們的上和/或下外邊距也會發生合并。請看下圖:
盡管看上去有些奇怪,但是外邊距甚至可以與自身發生合并。
假設有一個空元素,它有外邊距,但是沒有邊框或填充。在這種情況下,上外邊距與下外邊距就碰到了一起,它們會發生合并:
外邊距合并初看上去可能有點奇怪,但是實際上,它是有意義的。以由幾個段落組成的典型文本頁面為例。第一個段落上面的空間等于段落的上外邊距。如果沒有外邊距合并,后續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合并,段落之間的上外邊距和下外邊距就合并在一起,這樣各處的距離就一致了。
margin折疊的產生有幾個條件:
這些margin都處于普通流中,并在同一個BFC中;
這些margin沒有被非空內容、padding、border 或 clear 分隔開;
這些margin在垂直方向上是毗鄰的,包括以下幾種情況:
1、一個box的top margin與第一個子box的top margin
2、一個box的bottom margin與最后一個子box的bottom margin,但須在該box的height 為auto的情況下
3、一個box的bottom margin與緊接著的下一個box的top margin
4、一個box的top margin與其自身的bottom margin,但須滿足沒創建BFC、零min-height、零或者“auto”的height、沒有普通流的子box
垂直方向上毗鄰的box不會發生折疊的情況:
根元素的外邊距不會參與折疊
一個有clearance的box的上下margin毗鄰,它會與緊接著的下一個box發生margin折疊,但折疊后的margin不會再與它們父box的bottom margin折疊
折疊邊距的計算
當兩個margin都是正值的時候,取兩者的最大值;當 margin 都是負值的時候,取的是其中絕對值較大的,然后,從 0 位置,負向位移;當有正有負的時候,先取出負 margin 中絕對值中最大的,然后,和正 margin 值中最大的 margin 相加。但必須注意,所有毗鄰的margin要一起參與運算,不能分步進行。