来看看这个问题“子元素为什么设置margin-top会影响父元素的margin-top。
<div class="box-father">
<div class="box-son">
</div>
</div>
先把html,body,div的默认margin,padding设为0,。
再给父元素设置宽高,子元素设置宽高。
div{margin:0;padding:0;}
.box-father{
width:100px;
height:100px;
background:red;
}
.box-son{
width:50;
height:50px;
background:blue;
}
然后又设置子元素的margin-top为20px。
效果如下
查了下,简单来说是因为父元素没有设置padding或者border时,第一个子元素会和父元素的margin-top重叠(w3c就这么规定滴,不用疑问为什么会这么做)。
解决方法就是
父元素设置padding
或者父元素设置border
或者父元素设置overflow
解决了^_^之前没遇到是因为这几个属性太常见了,设置的比较频繁...所以之前没遇到。