嵌套div导致子区域margin失效问题解决

现象

<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