Question

这里发布了多种方法来解除垂直PARENT边距，但没有关于相邻元素的垂直边距的拆除。我找到的唯一解决方案是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;
}

最优雅的方法是将这两个盒子之间的距离设为30px而不是20px（第一个边距为10px且不会折叠）？

Answer 1

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

8 Box model - 8.3.1 Collapsing margins

在CSS中，两个或多个框（可能是也可能不是兄弟）的相邻边距可以组合形成单个边距。据说以这种方式组合的边距会崩溃，因此产生的合并边距称为折叠边距。

以下规则适用，这意味着您可以采取一些措施来防止边距因兄弟元素而崩溃：

浮动框与任何其他框之间的边距不会崩溃（甚至在浮动及其流入的子代之间也不会崩溃）

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

＆＃13;

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

＆＃13;

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

＆＃13;

内联块方框的边距不会崩溃（即使是流入的子节点也不会崩溃）。

因此，您还可以将元素的display添加到inline-block：

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: