现象

<div class="prev"></div>
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="next"></div>

.prev{
  width: 300px;
  height: 50px;
  background-color: red;
}
.parent{
  width: 300px;
  height: 300px;
  background-color: aqua;
}
.child{
  width: 100px;
  height: 100px;
  background-color: blueviolet;
  margin-top: 10px;
}
.next{
  width: 300px;
  height: 50px;
  background-color: red;
}

原因

给子元素 child 设置的 margin-top: 10px; 没有作用在子元素和父元素之间产生间距，而是作用在了父元素及其相邻元素之间产生了间距，原因是两个嵌套的 div，如果外层 div 的 padding 值为 0，那么内层 div 的 margin-top 或 margin-bottom 的值会“转移”给外层 div。

解决方法

• 给父元素 parent 加样式 overflow: hidden
• 给父元素 parent 添加值大于 0 的 padding-top 样式
• 给父元素 parent 添加样式 position: absolute