如何禁用兄弟元素之间的边距崩溃 [英] How to disable margin collapse between sibling elements
本文介绍了如何禁用兄弟元素之间的边距崩溃的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
这可能是非常愚蠢且众所周知的把戏,但是我还没有找到任何解决方法.我已经尝试过"overflow
","content: ' '; display: table;
",padding
和1px
border
.没有成功因此,我为这个问题做了一个小例子.
Probably this is very stupid and well-known trick, but I haven't found any fix yet. I've tried "overflow
", "content: ' '; display: table;
", padding
and 1px
border
. No success. So I've made small example to this problem.
有2个块元素:带底边距的页眉和带顶边距的页脚.我们的任务是使页边距相加:50 + 49 = 99像素!
There are 2 block elements: header with bottom margin and footer with top margin. The task is to make margins add together: 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 ,因为它没有collapsing margins
.
You could use Flexbox because it doesn't have collapsing margins
.
.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>
这篇关于如何禁用兄弟元素之间的边距崩溃的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文