解决margin-top没有效果

 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没有效果的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。