展开相邻两个元素之间的竖直边距

Question

展开相邻两个元素之间的竖直边距

3

这里有多种方法可以展开垂直PARENT边距，但没有关于展开相邻元素垂直边距的内容。我找到的唯一解决方案是在这个答案中（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;
}

在这两个框之间使距离为30px的最优雅的方法是什么（第一个边距应该为10px，不会塌陷）？

- daremkd

1

请您详细阐述一下您的情况（代码），以及您想要实现什么目标？要求读者深入研究其他问题和相关资源并不是很有帮助。 - GolezTrol

我正在尝试以比我目前找到的（最佳）方法更优雅的方式实现相邻垂直边距折叠。 - daremkd

我已经添加了代码。 - daremkd

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Josh Crozier · Accepted Answer

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

8 盒模型 - 8.3.1 折叠边距

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>

“inline-block”框的边距不会折叠（即使与其内部流元素也不会）。因此，您还可以将元素的“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>