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

Question

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

有 2 个 block 元素:带下边距的页眉和带上边距的页脚。任务是使边距相加: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，因为它没有折叠边距。

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