解決 外邊距摺疊問題

2022-02-23 10:25:43 字數 742 閱讀 8199

當兩個元素垂直相鄰時,如果兩個元素分別向同一方向設定了各自的外邊距,那麼會產生合併,取其中最大正值。

如果其中乙個元素是負的呢?

答案: 正值 - 負值 得 正值

如果兩個元素都是負值呢?

答案:負值 - 負值 得 負值

總結:1.如果存在負值,會是減法

2.如果是正值,則直接取大值

博主建議:上面的了解一下就行,知道這麼乙個問題,然後知道怎麼解決就行。

解決辦法: 只給乙個元素設定外邊距就好了,或者觸發bfc但不推薦。

為什麼觸發bfc能解決外邊距摺疊?

答:因為外邊距摺疊只會發生在屬於同一bfc的塊級元素之間。

如果你不知道什麼是bfc, 可以看這篇來自 mdn 的文章

還有參考文獻:

CSS外邊距摺疊問題

毗鄰的兩個或多個margin會合併成乙個margin,叫做外邊距摺疊,也叫外邊距合併。如果你還是不懂請參照 css 外邊距合併 兩點 1 摺疊只會發生在垂直方向 2 合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。摺疊規則 避免外邊距摺疊 type text css body div1...

外邊距摺疊(margin collapse)

兩個或多個毗鄰的普通流中的塊元素垂直方向上的margin會摺疊 注意一點,在沒有被分隔開的情況下,乙個元素的 margin top 會和它普通流中的第乙個子元素 非浮動元素等 的 margin top 相鄰 只有在乙個元素的 height 是 auto 的情況下,它的 margin bottom 才...

CSS外邊距摺疊引發的問題

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