给第一个子元素加margin-top，父元素会向下移动的解决办法

给第一个子元素设置margin-top上外边距时，父元素总会跟着向下移动。

<div id="parent">
    <div id="son"></div>
</div>
<style>
    body{
    
        margin: 0;
        padding: 0;
        background-color: grey;
    }
    #parent{
    
        width: 200px;
        height: 200px;
        background-color: red;
    }
    #son{
    
        width: 100px;
        height: 100px;
        background-color: green;
        margin-top: 50px;
    }
</style>

页面效果：