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，且其内容为
<!--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"> </div> <div id="div2"></div> </div>
注意：新增的div中的 不能省略。
原文：http://www.cnblogs.com/yddlvo/p/4659981.html