SOURCE

<!-- 垂直元素外边距塌陷 -->
<div class="b1">块级一</div>
<div class="b2">块级二</div>
<br />
<br />
<!-- 父子元素垂直方向外边距塌陷 -->
<div class="b3">块级三
    <div class="b4">块级四</div>
</div>

.b1 {
    background-color:  rgb(186, 238, 44);
    width: 100px;
    height: 100px;
    margin-bottom: 30px;
}

.b2 {
    background: rgb(47, 224, 255);
    width: 100px;
    height: 100px;
    margin-top: 10px;
}

.b3 {
    background-color:  rgb(186, 238, 44);
    width: 300px;
    height: 200px;
    margin-bottom: 40px;
}

.b4 {
    background: rgb(47, 224, 255);
    width: 100px;
    height: 100px;
    margin-top: 10px;
}