场景:父子级的标签,子级的添加上外边距会产生塌陷问题。
现象:导致父级一起向下移动。
<style>
.father{
width:300px;
height:300px;
background-color:pink;
}
.son{
width:100px;
height:100px;
background-color:#000;
margin-top:50px;
}
</style>
<div class="father">
<div class="son">son</div>
</div>
解决方法:
- 取消子级margin,父级设置padding
<style>
.father{
width:300px;
height:300px;
background-color:pink;
padding-top:50px;
box-sizing:border-box;
}
.son{
width:100px;
height:100px;
background-color:#000;
/* margin-top:50px; */
}
</style>
<div class="father">
<div class="son">son</div>
</div>
- 父级设置overflow:hidden
<style>
.father{
width:300px;
height:300px;
background-color:pink;
overflow:hidden;
}
.son{
width:100px;
height:100px;
background-color:#000;
margin-top:50px;
}
</style>
<div class="father">
<div class="son">son</div>
</div>
- 父级设置border-top
<style>
.father{
width:300px;
height:300px;
background-color:pink;
border-top:1px solid pink;
}
.son{
width:100px;
height:100px;
background-color:#000;
margin-top:50px;
}
</style>
<div class="father">
<div class="son">son</div>
</div>