文章目录
[+]
外边距重叠是指当两个垂直相邻的块级元素具有相邻的外边距时，它们的外边距会合并为一个外边距，取个中的最大值作为终极的外边距值。这可能会导致你看到的实际间距小于预期值。
为了避免外边距重叠，你可以考试测验以下方法：
给个中一个 div 添加内边距（padding）： 可以给个中一个 div 添加内边距，而不是利用外边距来实现间距的效果。这样就不会发生外边距重叠。
（图片来自网络侵删）
利用空的块级元向来间隔： 可以在两个 div 之间添加一个空的块级元素（例如 <div></div> ），并给这个元素设置期望的外边距。这样可以避免外边距重叠问题。
利用 flex 布局或者绝对定位： 可以考虑利用 flex 布局或者绝对定位来掌握元素之间的间距，这样可以避免外边距重叠问题。
下面是一个利用空的块级元向来间隔的示例代码：
<div class="container">
<div class="box"></div>
<div class="spacer"></div>
<div class="box"></div>
</div>
.container {
display: flex;
}
.box {
width: 50px;
height: 50px;
background-color: lightblue;
margin: 8px;
}
.spacer {
flex: 1;
}
通过以上方法，你该当可以避免外边距重叠，实现两个 div 之间的间距为 16px 的效果。
