嵌套块元素垂直外边距的合并（塌陷）

对于两个嵌套关系的块元素，若父元素无上内边距或边框，就会发生合并 (即塌陷)。

css代码：

<style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 500px;
                height: 500px;
                background-color: #22DD22;
                margin-top: 15px;
                /* border-top: 1px  solid #22DD22; */
                /* padding-top: 10px; */
                /* overflow: hidden; */
            }
            .sub_box {
                width: 200px;
                height: 200px;
                background-color: #FFFF00;
                margin-top: 10px;
            }
        </style>

运行：

解决方案：

      1、为父元素添加上边框

　　2、为父元素添加上内边距

　　3、为父元素添加overflow:hidden

解决后的效果：