?margin-top沒有效果怎么辦？

代碼如下所示：（其中#div2嵌套在#div1中）

<!--css樣式--> #div1{width:100px;height:100px;background:green; }#div2{margin-top:10px;width:50px;height:50px;background:red; } <!--html代碼--> <div id="div1"><div id="div2"></div> </div>

?

?樣式設(shè)置成如上后，#div1與#div2的上邊距重合。

解決方法如下：

1.為#div1設(shè)置一個(gè)透明邊框：border:1px solid transparent;

<!--css樣式--> #div1{width:100px;height:100px;background:green;border-top:1px solid transparent; }#div2{margin-top:10px;width:50px;height:50px;background:red; } <!--html代碼--> <div id="div1"><div id="div2"></div> </div>

?

注：這樣做會(huì)使#div1的寬度和高度均增加2px，影響美觀；

2.給#div1的上邊框設(shè)置一個(gè)內(nèi)邊距，值為10px，那么#div1的高度減去10px，因?yàn)樵O(shè)置內(nèi)邊距后，自身會(huì)膨脹，并且去掉#div2中margin-top屬性。

<!--css樣式--> #div1{width:100px;height:90px;background:green;padding-top:10px; }#div2{width:50px;height:50px;background:red; } <!--html代碼--> <div id="div1"><div id="div2"></div> </di>

3.引入一個(gè)高度為0的div，且其內(nèi)容為&nbsp;

<!--css樣式--> #div1{width:100px;height:100px;background:green; }#div2{margin-top:10px;width:50px;height:50px;background:red; } <!--html代碼--> <div id="div1"><div id="div3" style="height:0px">&nbsp;</div><div id="div2"></div> </div>

注意：新增的div中的&nbsp;不能省略。

?

轉(zhuǎn)載于:https://www.cnblogs.com/yddlvo/p/4659981.html

總結(jié)

以上是生活随笔為你收集整理的解决margin-top没有效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。