?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>

?

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

解決方法如下：

1.為#div1設置一個透明邊框：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>

?

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

2.給#div1的上邊框設置一個內邊距，值為10px，那么#div1的高度減去10px，因為設置內邊距后，自身會膨脹，并且去掉#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.引入一個高度為0的div，且其內容為&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;不能省略。

?

轉載于:https://www.cnblogs.com/yddlvo/p/4659981.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。