dom结构:
<div class="father">
<div class="son">
</div>
</div>
css
.father{
height:200px;
width:200px;
margin: 20px;
background-color: grey;
}
.son{
height:100px;
width:100px;
background-color:yellow;
}
结果:
而如果改变黄色区域的margin-top:10px;结果如下
没有改变 。让我们再试试改黄色区域的margin-top等于80px,结果如下
发现灰色区域变成margin-top:80px 而黄色区域相对于灰色区域的位置没变化。实际上,在垂直margin上父子公用最大的那个margin。
解决方法是:
把父级元素变成bfc(block format content)元素
bfc元素的触发:
position:absolute;
float:left/right;
display:inline-block;
overflow:hidden;