CSS外邊距摺疊問題

2021-08-17 01:46:03 字數 705 閱讀 1389

毗鄰的兩個或多個margin會合併成乙個margin,叫做外邊距摺疊,也叫外邊距合併。

如果你還是不懂請參照:css 外邊距合併

兩點:

1)摺疊只會發生在垂直方向

2)合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

摺疊規則:

避免外邊距摺疊:

type="text/css">

body

#div1,#div2

#div1

#div2

style>

id="div1">

id="div2">

div>

div>

div2覆蓋了div1,且它們的margin-top合併為10px;

為div1設定overflow:hidden/auto,即將div1樣式改為:

#div1

改完後發現div1變高了10px,即外邊距未發生摺疊

上下內邊距(或左右內邊距)的百分數會相對于父元素寬度設定,而不是相對於高度;外邊距也如此。

CSS之外邊距摺疊

collapsing margins,即外邊距摺疊,指的是毗鄰的兩個或多個外邊距 margin 會合併成乙個外邊距。其中所說的 margin 毗鄰,可以歸結為以下兩點 兩個或多個 說明其數量必須是大於乙個,又說明,摺疊是元素與元素間相互的行為,不存在 a 和 b 摺疊,b 沒有和 a 摺疊的現象。毗...

CSS外邊距摺疊引發的問題

第一種 兩個塊級元素的上下邊距摺疊 第二種 父元素和子元素 或者最後乙個元素 的外邊距 第三種 空的塊級元素的上下外邊距 摺疊的根本原因 margin之間直接接觸,沒有阻隔 摺疊後外邊距的計算 1.如果兩個外邊距都是正值,摺疊後的外邊距取較大的乙個 2.如果兩個外邊距一正一負,摺疊後的邊距為邊距之和...

CSS外邊距摺疊引發的問題

第一種 兩個塊級元素的上下邊距摺疊 第二種 父元素和子元素 或者最後乙個元素 的外邊距 第三種 空的塊級元素的上下外邊距 摺疊的根本原因 margin之間直接接觸,沒有阻隔 摺疊後外邊距的計算 1.如果兩個外邊距都是正值,摺疊後的外邊距取較大的乙個 2.如果兩個外邊距一正一負,摺疊後的邊距為邊距之和...