關於margin top失效的解決方法

2022-07-21 03:51:13 字數 577 閱讀 1570

float:left

clear:both; margin-top:20px;

會出現box2的上邊距 margin-top沒有效果的情況:

此時兩個層box1和box2,當為box1設定浮動屬性,box2清除浮動不具備浮動屬性。

網上找到的兩種比較靠譜的解釋:1:「在css2.1中,水平的margin不會被摺疊;垂直margin可能在一些盒模型中被摺疊…」2:當第乙個層浮動,而第二個沒浮動層的margin會被壓縮,詳見--浮動元素後非浮動元素的margin的處理。

得到解決問題思路:要浮動一起浮動,要就一起不浮動。

解決辦法:

1.box2增加float屬性

2.box1與box2之間增加一層"

"2、子元素設定margin-top作用于父容器

當給box2設定margin-top時,在ff下僅作用于父容器。

解決辦法:

1.給父容器box加overflow:hidden;屬性

2.父容器box加border除none以外的屬性

3.用父容器box的padding-top代替margin-top

margin top 失效的問題

其實關於這個問題,老生常談了。在這裡說說因僅僅是因為想更加深刻的理解一下。lang en charset utf 8 documenttitle head box d1.d2 style class box class d1 class d2 div div div body html 為了看到效果...

margin top失效的解決方法

異常處理彙總 前端系列 我的是屬於這種情況 按照網上的說法,我就是這個現象了 兩個層box1和box2,box1具有浮動屬性,box2沒有,這時候設定box2的上邊距margin top沒有效果。這是網上的解決方法 並不適用我的情況 本文向大家描述一下margin top失效的解決方法,margin...

margin top失效的解決方法

異常處理彙總 前端系列 我的是屬於這種情況 按照網上的說法,我就是這個現象了 兩個層box1和box2,box1具有浮動屬性,box2沒有,這時候設定box2的上邊距margin top沒有效果。這是網上的解決方法 並不適用我的情況 本文向大家描述一下margin top失效的解決方法,margin...