什么是margin塌陷,margin塌陷是指在使用margin布局时,特定情况下导致margin高度与代码中设计的高度不同。
如
1.
.outside
{
width: 100px;
height: 100px;
background: red;
}
.inside
{
width: 50px;
height: 50px;
background: green;
margin-top: 50px;
}
<div class="outside">
<div class="inside"></div>
</div>
期望效果
实际效果
解决办法是在父元素设置overflow:hidde属性。
.outside
{
width: 100px;
height: 100px;
background: red;
overflow: hidden;
}
在IE6/7下配合使用
zoom
:
1解决
2.
.top
{
height: 50px;
background: red;
margin-bottom: 50px;
}
.bottom
{
height: 50px;
background: green;
margin-top: 50px;
}
<div class="top"></div>
<div class="bottom"></div>
这种情况是浏览器不希望编程人员使用上下重复的margin布局