展开两个相邻元素中的垂直边距

Question

这里发布了多种方法来展开垂直父边距，但没有关于展开相邻元素的垂直边距的方法。我找到的唯一解决方案是在this answer（早在 2009 年）：

<div style="overflow: hidden; height: 0px; width: 0px;">&nbsp;</div>

从那里过去了将近 7 年。是否有更好的方法来做到这一点（可能使用一些 CSS3）？

基本上，假设您有：http://jsfiddle.net/ok2u3o3c/

<div class="one"></div>
<div class="two"></div>

div {
  width: 300px;
  height: 200px;
}

.one {
  margin-bottom: 10px;
  background-color: blue;
}

.two {
  margin-top: 20px;
  background-color: red;
}

将这两个框之间的距离设置为 30 像素而不是 20 像素（其中第一个边距贡献 10 像素并且不会折叠）的最优雅的方法是什么？

Answer 1

让我们从解释折叠边距行为的相关文档开始：

8 Box model - 8.3.1 Collapsing margins

在 CSS 中，两个或多个框（可能是兄弟，也可能不是兄弟）的相邻边距可以组合成一个边距。以这种方式组合的边距称为折叠边距，由此产生的组合边距称为折叠边距。

以下规则适用，这意味着您可以采取一些措施来防止同级元素的边距折叠：

浮动框和任何其他框之间的边距不会折叠（甚至在浮动框与其流入的子对象之间）

因此，如果您浮动具有折叠边距的元素，它们将不再折叠：

.collapsing-margins {
  margin: 100px 0;
  background: #f00;
  float: left;
  width: 100%;
}

<div class="parent">
  <div class="collapsing-margins">Element</div>
  <div class="collapsing-margins">Element</div>
</div>

---

内联块框的边距不会折叠（即使是它们的流入子代）。

因此您还可以添加将元素的display 更改为inline-block：

.collapsing-margins {
  margin: 100px 0;
  background: #f00;
  display: inline-block;
  width: 100%;
}

<div class="parent">
  <div class="collapsing-margins">Element</div>
  <div class="collapsing-margins">Element</div>
</div>