<div class="container">
  块级元素外边距合并
  <span class="d">inline-block1</span>
  <span class="d">inline-block2</span>
  <span class="d">inline-block3</span>
</div>

<div class="container">
  非块级元素外边距叠加
  <span class="b">block1</span>
  <span class="b">block2</span>
  <span class="b">block3</span>
</div>

* {box-sizing: border-box;}
.container {
  display: inline-block;
  flex-direction: column;
  width: 250px;
  vertical-align: top;
  text-align: center;
}
.d,.b {
  border: 1px solid #333;
}

.d {
  margin: 20px 0;
  display: block;
}

.b {
  margin: 25px 0;
  display: inline-block;
  width: 100%;
}