文章出處：
css屬性有很多值得學習的地方，你對css中margin-top屬性失效的解決方法是否熟悉，這裡和大家分享一下，相信通過本文的介紹你對margin-top屬性失效的解決方法一定會有深刻的認識。
關於margin-top屬性失效的解決方法
常出現兩種情況：
（一）margin-top失效
先看下面**：
<兩個層box1和box2，box1具有浮動屬性，box2沒有，這時候設定box2的上邊距margin-top沒有效果。div>
<
divclass
divclass="box1"
>float:left
div>
<
divclass
divclass="box2"
>clear:both;margin-top:20px;
div>
div>
網上能找到的兩種比較靠譜的解釋：
1：「在css2.1中，水平的margin不會被摺疊；垂直margin可能在一些盒模型中被摺疊…」
2：當第乙個層浮動，而第二個沒浮動層的margin會被壓縮，詳見--浮動元素後非浮動元素的margin的處理。
得到解決問題思路：要浮動一起浮動，要就一起不浮動。
解決辦法：
1.box2增加float屬性
2.box1與box2之間增加一層"
"（二）子元素設定margin-top作用于父容器
<當給box2設定margin-top時，在ff下僅作用于父容器。divclass
divclass="box"style="height:100px;background:red;">
<
divclass
divclass="box2"
>clear:both;
margin-top:20px;height:50px;width:500px;
background:#000;
div>
div>
解決辦法：
1.給父容器box加overflow:hidden;屬性
2.父容器box加border除none以外的屬性
3.用父容器box的padding-top代替margin-top
css中top和margin top的區別
最近學習css，碰到了這個問題，所以記錄下來。margin top 或者其他margin 其實是和文件流 document flow 相關的。當你為某個元素加入margin屬性時，那麼接下來的這些元素都會被移動。如果你不想影響到文件流裡的其他元素，那麼就配合使用top和position。當posit...
CSS 之 巢狀 margin top 處理
如下 div style width 1000px height 700px margin auto div style width 1000px height 49px margin top 281px span style display inline block width 121px hei...
子元素margin top屬性傳遞給父元素的問題
問題描述 乙個父包含框包含乙個子元素。給正常流的子元素乙個垂直外邊距margin top就會使得父元素跟著往下走，而子元素和父元素的邊距則沒有發生變化。html結構 css樣式 box1 box1 1 解決辦法 1.修改父元素的高度，增添padding top樣式模擬 常用 2.為父元素新增over...