塌陷：
- explanation：父子块元素同时有上外边距，父元素应用较大的外边距值
- 解决方法
- 父元素加上overflow:hidden;(常用）
- 父元素加上透明border，即border: 1px solid transparent;
- 父元素加上上内边距，即padding: 1px
- 方法一:
<style>
.fa {
width: 500px;
height: 500px;
background-color: crimson;
margin-top: 50px;
overflow:hidden;
}
.son {
width: 200px;
height: 200px;
background-color: blue;
margin-top: 200px;
}
</style>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
- 方法二:
<style>
.fa {
width: 500px;
height: 500px;
background-color: crimson;
margin-top: 50px;
border: 1px solid transparent;
}
.son {
width: 200px;
height: 200px;
background-color: blue;
margin-top: 200px;
}
</style>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
- 方法三:
<style>
.fa {
width: 500px;
height: 500px;
background-color: crimson;
margin-top: 50px;
padding: 1px;
}
.son {
width: 200px;
height: 200px;
background-color: blue;
margin-top: 200px;
}
</style>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
