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

Posted 2023-03-24

【中文标题】展开两个相邻元素中的垂直边距

【英文标题】：Uncollapse a vertical margin in two adjacent elements

【发布时间】：2016-03-21 09:55:03

【问题描述】：

这里发布了多种方法来展开垂直父边距，但没有关于展开相邻元素的垂直边距的方法。我找到的唯一解决方案是在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 像素并且不会折叠）的最优雅的方法是什么？

【问题讨论】：

您能否详细说明您的情况（代码）以及您想要实现的目标？让您的读者深入研究另一个问题及其链接的资源并不是很有帮助。

我正在尝试以一种比我目前找到的（最好的）方式更优雅的方式来实现相邻的垂直边距折叠。

我已经添加了代码。

【参考方案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>

【讨论】：

我猜第三种方式是我指定的，所以这些是唯一的选择？

@daremkd 请参阅 下的w3.org/TR/CSS2/box.html#collapsing-margins“请注意上述规则暗示：”。还有一些，我只是没有一一列出。