上下元素margin重疊問題的解決辦法(一種情況)

2021-07-25 18:39:38 字數 1012 閱讀 5553

問題描述:

當兩個元素縱向存在,上面的元素設有

margin-bottom,

下面的元素設有

margin-top

,有時候我們就會遇到乙個奇怪的現象,那就是我們實際得到的兩個元素之間的間距並非是上面兩個值的和,而是其它值。

具體情況:

我們先編寫如下html**:

這是div1

這是div2-1

css**:*

#div1, #div2-1

#div1

#div2-1

#div2

效果如下:

分析:按

理說,我們對div1設定了margin-bottom:50px;

對div2-1設定了margin-top: 100px;

那麼,我們得到兩個元素的中間間距應該是150px才對,但是實際效果如上圖所示,兩個元素之間的間距為100

px。原因在於

div1

的margin-bottom

的參照元素是div2-1,而div2-1

的margin

-top的參照元素恰好是

div1,這就導致了它倆之間的間距就會以兩值中最大的那個為實際效果。這個現象其實和我們生活中很多場景很像,仔細想想應該不難理解。

解決辦法:給它們倆之間乙個另外的參照,這裡給div2

加個邊(黑色)。

css**:

#div2

改後的效果如下:

這樣我們就得到了我們想要的效果。當然,這個問題還會有其它的變形情況,需要我們舉一反三。

關於margin上下重疊的問題

有兩種情況 1 兄弟級的塊之間,margin這個屬性上下邊距,經常會發生重疊的情況,以數值大的為準,而不會相加。2 父子級的塊之間,子級的上下margin會與父級上下margin重疊,以數值大的為準,而不會相加。如何解決?第一種情況 1 float浮動 或者 2 inline block 第二種情況...

margin重疊問題

寬高100,底外距50 寬高100,上外距20 a c.d 當div.c標籤無內容時 d標籤的上邊距消失了 div.c有內容時 d標籤上邊距顯示 當有div巢狀,且外層div無內容,此時內層div的margin會消失,解決辦法有6種 1.外層c標籤 overflow hidden padding t...

忽略的問題 margin重疊

1.margin同向重疊。問題描述 解決方法 e.給內層div們設定float屬性 記得最後閉合浮動或者清除浮動 2.margin異向重疊 問題描述 依舊如上圖,first和second盒子都有margin 10px,但是顯示出來兩個盒子的距離卻不是20px,而仍然是10px。也就是說此時上面盒子的...