解决嵌套元素外边距塌陷问题

外边距塌陷（合并）问题：在嵌套元素中，给内部元素设置外边距会作用到外部元素上，而无法达到想要效果

 .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;
}