<div class="test"></div>
<div class="test"></div>
<hr>
<div class="test"></div>
<div class="bfc">
  <div class="test"></div>
</div>
.test{
  width: 50px;
  height: 50px;
  background: red;
  margin: 20px;

}
.bfc{
  /*  如果处于不同的 BFC 容器里,就不会出现 margin collapse  */
  display: flex;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.