Question

这可能是非常愚蠢和众所周知的伎俩，但我还没有找到任何修复方法。我尝试过“overflow”，“content: ' '; display: table;”，padding和1px border。没有成功。所以我为这个问题做了一个小例子。

有2个块元素：带有底部边距的页眉和带有上边距的页脚。任务是将边距加在一起：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>

Answer 1

您可以使用 Flexbox ，因为它没有collapsing margins。

＆＃13;

.content {
  display: flex;
  flex-direction: column;
}

.main-header {
  margin-bottom: 50px;
}
.main-footer {
  margin-top: 49px;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以浮动它们以禁用折叠边距，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>

Answer 3

首先，发布的flexbox solution that @Nenad Vracar是最有效的。

一些替代方案
假设问题是你不知道这两个标签之间是否有什么东西你可以在这种情况下使用额外的选择器（虽然只有文本在两个标签之间才会失败，因为它仍然会应用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>

Answer 4

由于adjacent siblings并且由于边距折叠占用较高的边距，我们使用 + CSS运算符，以便在{{1}之间没有其他元素时}和header，我们将footer的{{1}}增加为 margin-top

JS Fiddle

footer

99px

Answer 5

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

根据MDN：

保证金崩溃发生在三个基本情况中：

相邻的兄弟姐妹   相邻兄弟姐妹的边缘被折叠（除非后面的兄弟姐妹需要通过花车清除）。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如何禁用兄弟元素之间的边距折叠

5 个答案: