溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關(guān)margin-top失效常見癥狀有哪些的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
關(guān)于margin-top失效的解決方法
常出現(xiàn)兩種情況：
（一）margin-top失效
先看下面代碼：
<div> <divclassdivclass="box1">float:left</div> <divclassdivclass="box2">clear:both;margin-top:20px;</div> </div>
兩個層box1和box2，box1具有浮動屬性，box2沒有，這時候設(shè)置box2的上邊距margin-top沒有效果。
網(wǎng)上能找到的兩種比較靠譜的解釋：
1：“在CSS2.1中，水平的margin不會被折疊；垂直margin可能在一些盒模型中被折疊…”
2：當(dāng)***個層浮動，而第二個沒浮動層的margin會被壓縮，詳見--浮動元素后非浮動元素的margin的處理。
得到解決問題思路：要浮動一起浮動，要就一起不浮動。
◆解決辦法：
1.box2增加float屬性
2.box1與box2之間增加一層"<divstyle="clear:both;"></div>"
（二）子元素設(shè)置margin-top作用于父容器
<divclassdivclass="box"style="height:100px;background:red;"> <divclassdivclass="box2">clear:both; margin-top:20px;height:50px;width:500px; background:#000;</div> </div>
當(dāng)給box2設(shè)置margin-top時，在FF下僅作用于父容器。
◆解決辦法：
1.給父容器box加overflow:hidden;屬性
2.父容器box加border除none以外的屬性
3.用父容器box的padding-top代替margin-top
感謝各位的閱讀！關(guān)于“margin-top失效常見癥狀有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
