初始HTML代码如下:
<div class="father">
<div class="son">123</div>
</div>
初始CSS代码如下:
.father {
width: 200px;
height: 200px;
margin: 10px auto;
background-color: pink;
}
.son {
width: 100px;
height: 100px;
background-color: purple;
margin-top: 10px; /*子元素设置margin-top,子元素与父元素之间并没有出现10px的上间距,称之为塌陷*/
}
初始效果图如下:
解决塌陷方法如下:
- 父盒子添加border
.father {
border: 1px solid #000;
}
效果图如下:
- 父盒子添加padding
.father {
padding: 1px;
}
- 父盒子添加overflow触发BFC
.father {
overflow: hidden;
}
效果图如下: