如何避免两个div元素的外边距重叠？

你遇到的是CSS中**外边距重叠（Margin Collapse）**的默认行为：相邻块级元素的上下外边距会合并为一个，取两者中的较大值（这里两者都是70px，所以最终间距只有70px）。以下是几种可行的修复方案：

方案1：触发元素的BFC（块级格式化上下文） #

BFC会阻断外边距的合并，常见触发方式任选其一即可：

• 设置overflow: hidden
• 改为display: inline-block
• 添加浮动（float: left/right）
• 设置定位为absolute或fixed

示例代码：

div {
  margin: 70px;
  border: 1px solid #4CAF50;
}

/* 给第二个div触发BFC */
div:nth-of-type(2) {
  overflow: hidden;
}

方案2：在两个Div之间插入分隔元素 #

通过一个无内容的元素将两个div的外边距隔开，避免重叠：

<div>This element has a margin of 70px.</div>
<div class="separator"></div>
<div>This element has a margin of 70px.</div>

div {
  margin: 70px;
  border: 1px solid #4CAF50;
}

.separator {
  margin: 0;
  height: 0;
  overflow: hidden;
}

也可以给分隔元素加透明边框，效果相同：

.separator {
  border-top: 1px solid transparent;
}

方案3：用内边距替换其中一个元素的外边距 #

将其中一个div的上下外边距替换为内边距，配合box-sizing: border-box保证元素尺寸不变：

div {
  border: 1px solid #4CAF50;
  box-sizing: border-box;
}

div:first-child {
  margin: 70px;
  margin-bottom: 0;
  padding-bottom: 70px;
}

div:last-child {
  margin: 70px;
}

方案4：给父容器添加边框/内边距 #

如果把两个div放在父容器中，给父容器添加上下透明边框或内边距，也能阻止子元素的外边距向外合并：

<div class="container">
  <div>This element has a margin of 70px.</div>
  <div>This element has a margin of 70px.</div>
</div>

.container {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

div {
  margin: 70px;
  border: 1px solid #4CAF50;
}

内容的提问来源于stack exchange，提问作者nyaina