外邊距塌陷問題的解決辦法

2022-06-23 11:27:10 字數 302 閱讀 2108

會導致外邊距塌陷的兩種情況

情況一:兩個兄弟盒子,上面的盒子設定了margin-bottom,下面的盒子設定了margin-top,實際中會取值較大的那個屬性值顯示在網頁中。這種情況一般較為少見。這兩個屬性只設定乙個即可解決。

情況二:巢狀盒子(父元素與子元素)間的外邊距塌陷(發生在垂直方向上的外邊距合併,注意是垂直方向)

解決情況二的外邊距塌陷一共有三種方法

方法一:給父元素加邊框border

方法二:給父元素加內邊距padding以達到類似效果

方法三:給父元素設定overflow:hidden;

CSS外邊距塌陷的問題

當塊級元素 block 的上外邊距 margin top 和下外邊距 margin bottom 同時都有設定時只會只會保留最大邊距,這種行為稱為邊界摺疊 margin collapsing 有時也翻譯為外邊距重疊。設定float 和position absolute 包括固定定位fixed,但是r...

css的外邊距合併或者外邊距塌陷問題

已知兩個寬和高均為100px,margin均為20px的div垂直排列,現象如下圖所示 當設定css1的margin bottom 40px 或者css2的margin top 40px時,現象如下圖所示 結論 只有當兩個垂直排列的盒子的垂直外邊距挨在一起時會產生合併問題,此問題也不需要解決,記住誰...

margin外邊距合併和塌陷問題

1.外邊距合併問題 垂直排列的兩個塊級顯示模式的元素,為上面的元素設定下外邊距,為下面的元素設定上外邊距,外邊距會產生合併,當兩個值相等時則外邊距就是那個值,當兩個值不相等時則外邊距就是值大的那個值。兩個塊級顯示模式的元素設定為浮動後再對第乙個元素設定右浮動,對第二個元素設定左浮動,不會產生合併問題...