在css中,某些情况下,相邻的两个或多个盒模型中的margin-top会塌陷(即失效)。如:
<div id="box1">
<div id="box2">
Hello World!
</div>
</div>
#box1{
width: 200px;
height: 200px;
background-color: pink;
}
#box2{
margin-top: 50px;
background: #FFCC33;
}
在上述情况中,不会出现:
而会出现:
当以下两个条件被满足时会形成该特殊情况:
- 父元素没有任何填充物,没有内边距,没有边框
- 子元素处在父元素的顶部边缘
解决办法有如下三种:
- 使子元素的属性变为float
- 使子元素的display属性变为inline-block
- 使父元素可见(这里的可见既包括显式可见和隐式可见),如将overflow设置为auto