關於margin上下重疊的問題

2021-07-22 10:47:23 字數 413 閱讀 8804

有兩種情況:

1、兄弟級的塊之間,margin這個屬性上下邊距,經常會發生重疊的情況,以數值大的為準,而不會相加。

2、父子級的塊之間,子級的上下margin會與父級上下margin重疊,

以數值大的為準,而不會相加。

如何解決?

第一種情況:

1、float浮動 或者

2、inline-block

第二種情況:

父級加1、overflow:hidden 或者

2、加padding  或者

3、加border  或者

子級加position:absolute

當然都是根據實際情況來解決問題的。

若本身設計稿樣式有所限制,無法用以上的屬性。那麼根據實際情況來調整,可以使用padding來代替margin。^_^

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。也就是說此時上面盒子的...

margin 重疊問題的理解

塊級元素的上外邊距 margin top 與下外邊距 margin bottom 有時會合併為單個外邊距,這樣的現象稱為 margin合 並 產生摺疊的必備條件 margin必須是鄰接的 而根據w3c規範,兩個margin是鄰接的必須滿足以下條件 必須是處於常規文件流 非float和絕對定位 的塊級...