外边距塌陷（合并）问题：在嵌套元素中，给内部元素设置外边距会作用到外部元素上，而无法达到想要效果
.father {
width: 300px;
height: 300px;
background-color: pink;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
}
实现效果
目标效果
解决办法：
1、给父级元素添加边框：
.father {
width: 300px;
height: 300px;
background-color: pink;
border:1px solid white;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
}
2、给父级元素添加内边距：
.father {
width: 300px;
height: 300px;
background-color: pink;
padding:1px;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
}
3、给父级元素添加overflow：
.father {
width: 300px;
height: 300px;
background-color: pink;
overflow:hidden;
}
.son {
width: 200px;
height: 200px;
background-color: purple;
margin-top: 50px;
}
