CSS中margin-top屬性失效怎么辦

這篇文章主要介紹了CSS中margin-top屬性失效怎么辦的相關(guān)知識，內(nèi)容詳細(xì)易懂，操作簡單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇CSS中margin-top屬性失效怎么辦文章都會有所收獲，下面我們一起來看看吧。

常出現(xiàn)兩種情況：

（一）margin-top失效

先看下面代碼：

<div> <divclassdivclass="box1">float:left</div> <divclassdivclass="box2">clear:both;margin-top:20px;</div> </div>

兩個(gè)層box1和box2，box1具有浮動屬性，box2沒有，這時(shí)候設(shè)置box2的上邊距margin-top沒有效果。

網(wǎng)上能找到的兩種比較靠譜的解釋：

1：“在CSS2.1中，水平的margin不會被折疊；垂直margin可能在一些盒模型中被折疊…”

2：當(dāng)***個(gè)層浮動，而第二個(gè)沒浮動層的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時(shí)，在FF下僅作用于父容器。

解決辦法：

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

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

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

css的全稱是什么

css的全稱是Cascading Style Sheets（層疊樣式表），它是一種用來表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。

關(guān)于“CSS中margin-top屬性失效怎么辦”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“CSS中margin-top屬性失效怎么辦”知識都有一定的了解，大家如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道。