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不會發生重疊（原因：根元素雖然是塊級盒，但不是流內元素）。

舉個

以上是css中關於margin不重疊的圖文代碼詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！