两个margin在垂直方向相遇时会发生塌陷现象

.a1{
  width: 100px;
  height: 100px;
  background-color: rgb(223, 126, 126); 
}
.a2{
  width: 50px;
  height: 50px;
  background-color: rgb(167, 153, 33);
}
<!-- margin了50px,40px塌陷 -->
<div class="a1" style="margin-bottom:50px;">1 </div>
<div class="a2" style="margin-top:40px;">2  </div>
<hr>
<!-- a2 50px塌陷 -->
<div class="a1" style="margin-top: 50px;">
  <div class="a2" style="margin-top: 50px;"></div>
</div>

图片说明

不设置时，margin-top为0，同样会发生塌陷
图片说明