如何解margin-top塌陷问题

什么是什么是margin-top塌陷

margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。（结合文章总结，侵删）

未设置margin-top的时候的灰色为父元素，粉色为大儿子，米黄色为二儿子；
代码块如下：在这里插入代码片

}
.son1{
width: 800px;
height: 200px;
background-color:pink;
/* margin-top: 30px; */

}
.son2{
width: 850px;
height: 200px;
background-color: blanchedalmond;
}

此时我们要想给父亲和大儿子之间设置一个上边距
因该在.
son1{
width: 800px;
height: 200px;
background-color:pink;
/* margin-top: 30px; */
但他并没有出现距离而是浏览器和父元素出现了上边距。
如图

举个例子：儿子本来要找爸爸，结果爷爷也在这儿，那就父子一起和爷爷，所以父就去承担这个margin-top。好 ，使用边框把爷爷和爸爸隔开，这时候有事只能找爸爸了。

如何解决这种塌陷呢？

1，给父元素设置边框

在.fa的css样式中加
border:1px solid red;
后 可以清楚的看到 粉色和灰色之间出现了边距；

方法二：利用怪异盒模型和padding 去使父亲和大儿子之间产生一定的上边距

如果我们仅仅只是想去实现 父亲和大儿子间的距离，那我们可以利用内边距（padding）实现
举个例子：（个人理解别笑） 你之前100斤，现在130斤在穿同样的裤子是不是会把裤子给撑开啊？，所以裤子开了，所以当使用普通盒子模型的时候，你要给他加个内边距，也就是多了30斤肥肉，这裤子能不爆开？所以标准盒子发生了变化，，那这时候我们还能怎样啊？我自己现在就减肥30斤呗，所以这也就对应了怪异盒只是压缩了空间。
实例：

给父元素直接加 padding-top: 50px
还需再加 box-sizing: border-box 在这里插入代码片
.fa {
width: 1000px;
height: 300px;
background-color: pink;

        padding-top: 50px;
        box-sizing: border-box;
    }       

    .son {
        width: 600px;
        height: 200px;
        background-color: palegreen;
    }
</style>