Menu
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.
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>
965
More specifically, in IE 7 margins do not collapse when some kind of layout is specified for the parent element, such as width. Show activity on this post. One neat trick to disable margin collapsing that has no visual impact, as far as I know, is setting the padding of the parent to 0.05px:
To prevent margin collapsing between siblings, add display: inline-block; to one of the siblings (one is enough though you can add it to both). Thanks for contributing an answer to Stack Overflow!
The padding is no longer 0 so collapsing won't occur anymore but at the same time the padding is small enough that visually it will round down to 0. If some other padding is desired, then apply padding only to the "direction" in which margin collapsing is not desired, for example padding-top: 0.05px;.
Margins can collapse even when they aren’t from sibling elements. Margins in the same direction from different elements can also collapse. Margins from any number of elements can collapse. Negative margins also collapse, but it’s the larger-negative number that wins.
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>You can float them to disable the collapsing margins, with width:100% to make them to occupy the entire width, rather than determined by the content.
.main-header,
.main-footer {
float: left;
width: 100%;
}
.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>To start, the flexbox solution that @Nenad Vracar posted is the most valid one.
A couple of alternatives
Assuming the problem is that you do not know if there is something between the two tags you could use an extra selector for this case (although it would fail if only text is between the two tags as it would still apply the 99 margin)
.main-header + .main-footer{margin-top:99px;}<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>Now, depending on your situation you could use the tricks you mention and pass the margin to the pseudo-elements.
.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.&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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
