margin-top绑架父节点问题的分析

当两个空的块级元素嵌套时，如果内部的块设置有margin-top属性，那么内部块的margin-top属性会绑架父级元素

 

<div id="parrent">
 <div id="box1"></div>
</div>


#parrent{
 width:500px;
 height:300px;
 background:teal;
}
#box1{
 width:100px;
 height:100px;
 background:aqua;
 margin:20px;
}

解决方法：
1、设置父元素或者自身的display:inline-block;
2、设置父元素的border:1px aqua solid;(>0)
3、设置父元素的padding:1px;(>0)
4、给父元素设置overflow:hidden;
5、给父元素或者自身设置position:absolute;
6、设置父元素非空，填充一定的内容。

转载于:https://www.cnblogs.com/Qbright/archive/2012/05/13/2498483.html