可能这是非常愚蠢和众所周知的技巧,但我还没有找到任何修复.我试过“溢出”,“内容：”;显示：表格;”,填充和1px边框.没有成功.所以我为这个问题做了一个小例子.
有2个块元素：带有底部边距的页眉和带有上边距的页脚.任务是将边距加在一起：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>
