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

來源：懂視網責編：小采時間：2020-11-27 18:50:38

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

css中關于margin不重疊的圖文代碼詳解:margin重疊摘自css2.1規范中文版CSS中，兩個或者多個盒（可能但不一定是兄弟）的相鄰的margin會被結合成一個margin。Margin按這種方式結合叫重疊（collapse），產生的結合的margin叫做重疊margin。margin重疊的計算規則摘自css2.1規范中文版當兩個

推薦度：

點擊下載本文 文檔為doc格式

導讀css中關于margin不重疊的圖文代碼詳解:margin重疊摘自css2.1規范中文版CSS中，兩個或者多個盒（可能但不一定是兄弟）的相鄰的margin會被結合成一個margin。Margin按這種方式結合叫重疊（collapse），產生的結合的margin叫做重疊margin。margin重疊的計算規則摘自css2.1規范中文版當兩個

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。