解决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，且其内容为 

<!--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中的 不能省略。

 

转载于:https://www.cnblogs.com/yddlvo/p/4659981.html