子元素的marign-top属性撑开父级元素

初学html写页面时，总是遇到父元素的第一个子元素加marign-top
会把父元素一起撑开
问题如下：
这是一段简单的代码：

 <style>
        #box1 {
   
            width: 100%;
            height: 100%;
            background-color: powderblue;
        }

        .box1-child {
   
            width: 1000px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }

        #box2 {
   
            width: 100%;
            height: 100%;
            background-color: bluevi