css：垂直方向外边距margin塌陷问题及解决

* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

<style type="text/css">
.box-8 {
  margin-right: 10px;
  background-color: green;
}
.box-9 {
  margin-left: 20px;
  background-color: gray;
}
</style>
<div style="display: flex;">
  <div class="box box-8">box-8</div>
  <div class="box box-9">box-9</div>
</div>

<style type="text/css">
.box-1 {
  /*底部margin 10px被box-2合并了*/
  margin-bottom: 10px;
  background-color: green;
}
.box-2 {
  margin-top: 20px;
  background-color: gray;
}
</style>
<div class="box box-1">box-1</div>
<div class="box box-2">box-2</div>

<style type="text/css">
.box-3 {
  margin-top: 10px;
  background-color: green;
}
.box-4 {
  margin-top: 20px;
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: gray;
}
</style>
<div class="box box-3">
  <div class="box box-4">box-4</div>
</div>

<style type="text/css">
.box-5 {
  background-color: green;
}
.box-6 {
  margin-top: 10px;
  background-color: blue;
}
.box-7 {
  margin-top: 20px;
  width: 80px;
  height: 80px;
  line-height: 80px;
  background-color: gray;
}
</style>
<div class="box box-5">
  <div class="box-6"></div>
  <div class="box box-7">box-7</div>
</div>

<style type="text/css">
.box-10 {
  background-color: green;
}
.box-11 {
  margin-top: 30px;
  background-color: gray;
}
</style>
<div class="box box-10">box-10</div>
<div class="box box-11">box-11</div>

<style type="text/css">
.box-12 {
  margin-top: 10px;
  background-color: green;
  padding-top: 20px;
}
.box-13 {
  /* margin-top: 20px; */
  width: 50px;
  height: 50px;
  line-height: 50px;
  background-color: gray;
}
</style>
<div class="box box-12">
  <div class="box box-13">box-13</div>
</div>