可能这是非常愚蠢且众所周知的技巧,但我还没有找到任何修复方法。我试过“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.&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>©2015 Lorem ipsum dolor.</span>
</footer>
最佳答案
您可以使用 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>©2015 Lorem ipsum dolor.</span>
</footer>
</div>
关于css - 如何禁用兄弟元素之间的边距折叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35257018/