css中關於margin不重疊的圖文代碼詳解

margin重疊

摘自css2.1規範中文版

CSS中，兩個或者多個盒（可能但不一定是兄弟）的相鄰的margin會被結合成一個margin。Margin按這種方式結合叫重疊（collapse）
，產生的結合的margin叫做重疊margin。

margin重疊的計算規則

摘自css2.1規範中文版

當兩個或者更多的margin合并時，產生的margin寬度為合并margin寬度中的最大值。至於負margin，就從正相鄰margin的最大值中減去負相鄰margin的絕對值的最大值。如果沒有正margin，就用0減去相鄰margin的絕對值的最大值

什麼是相鄰的margin

摘自css2.1規範中文版
兩個margin是相鄰的，若且唯若：

• 都屬於流內塊級盒，處於同一個塊格式化上下文。

• 沒有行盒（line box），沒有空隙，沒有padding並且沒有border把它們隔開（注意，因此某些0高度行盒）

• 都屬於豎直相鄰盒邊（vertically-adjacent box edges），即來自下列某一對：
  1.一個盒的top margin和它的第一個流內子級的top margin
  2.一個盒的bottom margin和它的下一個流內後面的兄弟（its next in-flow following sibling）的top margin
  3.最後一個流內子級的bottom margin和它的父級的bottom margin，如果父級的高度的計算值為'auto'
  4.一個盒的top和bottom margin，該盒沒有建立一個新的塊格式化上下文並且min-height的計算值為0，height的計算值為0或者'auto'，並且沒有流內子級

如果一個margin的任何部分margin與另一個margin相鄰的話，就認為它與那個margin相鄰，是合并（collapsed）margin。

具體分析各個條件

1.都屬於流內塊級盒，處於同一個塊格式化上下文。

什麼是流內元素？如果一個元素是浮動的，絕對位置的或者是根項目，那麼它就是流外元素。如果一個元素不是流外的，就叫流內元素。
流內塊級盒，就是流內區塊層級元素產生的一個盒。

結論1：根項目的盒子margin不會發生重疊（原因：根項目雖然是塊級盒，但不是流內元素）。

舉個