如何禁用相邻元素之间的外边距折叠

Question

也许这是一个非常愚蠢和众所周知的技巧，但我还没有找到任何解决方法。我尝试过"overflow", "content: ' '; display: table;", padding 和 1px border等方法，但都没有成功。因此，我做了一个小例子来解决这个问题。

有两个块级元素：带底部边距的标题和带顶部边距的页脚。任务是使边距相加：50 + 49 = 99 px！

.main-header {
  margin-bottom: 50px;
}
.main-footer {
  margin-top: 49px;
}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1>

<header class="main-header">
  HEADER Lorem ipsum dolor.
</header>

<footer class="main-footer">
  FOOTER <span>&copy;2015 Lorem ipsum dolor.</span>
</footer>

- ieXcept

Answer 1

您可以使用Flexbox，因为它没有折叠边距。

.content {
  display: flex;
  flex-direction: column;
}

.main-header {
  margin-bottom: 50px;
}
.main-footer {
  margin-top: 49px;
}

<div class="content">
  <header class="main-header">
    HEADER Lorem ipsum dolor.
  </header>

  <footer class="main-footer">
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span>
  </footer>
</div>

- Nenad Vracar

---

+1 是因为我正在使用 flexbox，并期望边距折叠，结果它们没有折叠，让我十分烦恼。你能否引用规范中说明它们不会折叠的地方？ - zero298

另外，将align-items：flex-start放置在.content上，这样您的元素就不会被拉伸。它们的默认值是不拉伸的。 - corysimmons

Answer 2

首先，@Nenad Vracar发布的flexbox solution是最有效的解决方案。

---

几种备选方案
假设问题是您不知道两个标记之间是否有内容，您可以为此情况使用额外的选择器（尽管如果仅在两个标记之间存在文本，则会失败，因为它仍将应用99边距）

.main-header + .main-footer{margin-top:99px;}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1>

<header class="main-header">
    HEADER Lorem ipsum dolor.
</header>

<footer class="main-footer">
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span>
</footer>

---

现在，根据您的情况，您可以使用您提到的技巧，并将边距传递给伪元素。

.main-header:after {
    content: '';
    margin-bottom: 50px;
    display: table;
}

.main-footer:before {
    content: '';
    display: table;
    margin-top: 49px;
}

.main-header,
.main-footer {
    overflow: auto;
}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1>

<header class="main-header">
    HEADER Lorem ipsum dolor.
</header>

<footer class="main-footer">
    FOOTER <span>&copy;2015 Lorem ipsum dolor.</span>
</footer>

- Gabriele Petrioli

Answer 3

你可以使用浮动来禁用折叠边距，使用 width:100% 让它们占据整个宽度，而不是由内容决定。

.main-header,
.main-footer {
  float: left;
  width: 100%;
}
.main-header {
  margin-bottom: 50px;
}
.main-footer {
  margin-top: 49px;
}

<h1>if distance btw H.&amp;F. is 99 px then margins don't collapse! Unfortunatelly, is is</h1>

<header class="main-header">
  HEADER Lorem ipsum dolor.
</header>

<footer class="main-footer">
  FOOTER <span>&copy;2015 Lorem ipsum dolor.</span>
</footer>

- Stickers

Answer 4

因为存在 相邻兄弟选择器，并且由于边距折叠会采用更高的边距，所以我们使用 + CSS 运算符来实现当 header 和 footer 之间没有其他元素时，增加 footer 的 margin-top 到 99px

JS Fiddle

.main-header {
  margin-bottom: 50px;
  background-color: orange;
}
.main-footer {
  background-color: skyblue;
  margin-top: 49px;
}
.main-header + .main-footer {
  /* only when there's no other elements between header and footer this will be applied */
  margin-top: 99px;
}

<header class="main-header">HEADER Lorem ipsum dolor.</header>

<footer class="main-footer">FOOTER <span>&copy;2015 Lorem ipsum dolor.</span></footer>

- Mi-Creativity

Answer 5

你可以添加一个简单的 float 和 clear:both，使用 ::before 和 ::after 伪元素。

根据 MDN 的说法：

外边距折叠发生在三种基本情况下：

相邻兄弟元素 相邻兄弟元素的外边距会折叠（除非后面的兄弟元素需要被清除以通过浮动）。

.main-header::after, .main-footer::before {
  content:'';
  float:left;
  width:100%;
  clear:both;
}

.main-header::after {
  margin-bottom: 50px;
}

.main-footer::before {
  margin-top: 49px;
}

<header class="main-header">
  HEADER Lorem ipsum dolor.
</header>

<footer class="main-footer">
  FOOTER <span>&copy;2015 Lorem ipsum dolor.</span>
</footer>

- Rhumborl