外邊距塌陷（合并）問題：在嵌套元素中，給內部元素設置外邊距會作用到外部元素上，而無法達到想要效果

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