Is there a way to disable margin-collapsing altogether? The only solutions I've found (by the name of "uncollapsing") entail using a 1px border or 1px padding. I find this unacceptable: the extraneous pixel complicates calculations for no good reason. Is there a more reasonable way to disable this margin-collapsing?
For your information you could use grid but with side effects :)
.parent {
display: grid
}
I know that this is a very old post but just wanted to say that using flexbox on a parent element would disable margin collapsing for its child elements.
Actually, there is one that works flawlessly:
display: flex; flex-direction: column;
as long as you can live with supporting only IE10 and up
.container {_x000D_
display: flex;_x000D_
flex-direction: column;_x000D_
background: #ddd;_x000D_
width: 15em;_x000D_
}_x000D_
_x000D_
.square {_x000D_
margin: 15px;_x000D_
height: 3em;_x000D_
background: yellow;_x000D_
}
_x000D_
<div class="container">_x000D_
<div class="square"></div>_x000D_
<div class="square"></div>_x000D_
<div class="square"></div>_x000D_
</div>_x000D_
<div class="container">_x000D_
<div class="square"></div>_x000D_
<div class="square"></div>_x000D_
<div class="square"></div>_x000D_
</div>
_x000D_
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
:
.parentClass {
padding: 0.05px;
}
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;
.
Working example:
.noCollapse {_x000D_
padding: 0.05px;_x000D_
}_x000D_
_x000D_
.parent {_x000D_
background-color: red;_x000D_
width: 150px;_x000D_
}_x000D_
_x000D_
.children {_x000D_
margin-top: 50px;_x000D_
_x000D_
background-color: lime; _x000D_
width: 100px;_x000D_
height: 100px;_x000D_
}
_x000D_
<h3>Border collapsing</h3>_x000D_
<div class="parent">_x000D_
<div class="children">_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
<h3>No border collapsing</h3>_x000D_
<div class="parent noCollapse">_x000D_
<div class="children">_x000D_
</div>_x000D_
</div>
_x000D_
Edit: changed the value from 0.1
to 0.05
. As Chris Morgan mentioned in a comment bellow, and from this small test, it seems that indeed Firefox takes the 0.1px
padding into consideration. Though, 0.05px
seemes to do the trick.
I had similar problem with margin collapse because of parent having position
set to relative. Here are list of commands you can use to disable margin collapsing.
Just try to assign any parent-fix*
class to div.container
element, or any class children-fix*
to div.margin
. Pick the one that fits your needs best.
When
div.absolute
with red background will be positioned at the very top of the page.div.absolute
will be positioned at the same Y coordinate as div.margin
html, body { margin: 0; padding: 0; }_x000D_
_x000D_
.container {_x000D_
width: 100%;_x000D_
position: relative;_x000D_
}_x000D_
_x000D_
.absolute {_x000D_
position: absolute;_x000D_
top: 0;_x000D_
left: 50px;_x000D_
right: 50px;_x000D_
height: 100px;_x000D_
border: 5px solid #F00;_x000D_
background-color: rgba(255, 0, 0, 0.5);_x000D_
}_x000D_
_x000D_
.margin {_x000D_
width: 100%;_x000D_
height: 20px;_x000D_
background-color: #444;_x000D_
margin-top: 50px;_x000D_
color: #FFF;_x000D_
}_x000D_
_x000D_
/* Here are some examples on how to disable margin _x000D_
collapsing from within parent (.container) */_x000D_
.parent-fix1 { padding-top: 1px; }_x000D_
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}_x000D_
.parent-fix3 { overflow: auto;}_x000D_
.parent-fix4 { float: left;}_x000D_
.parent-fix5 { display: inline-block; }_x000D_
.parent-fix6 { position: absolute; }_x000D_
.parent-fix7 { display: flex; }_x000D_
.parent-fix8 { -webkit-margin-collapse: separate; }_x000D_
.parent-fix9:before { content: ' '; display: table; }_x000D_
_x000D_
/* Here are some examples on how to disable margin _x000D_
collapsing from within children (.margin) */_x000D_
.children-fix1 { float: left; }_x000D_
.children-fix2 { display: inline-block; }
_x000D_
<div class="container parent-fix1">_x000D_
<div class="margin children-fix">margin</div>_x000D_
<div class="absolute"></div>_x000D_
</div>
_x000D_
Here is jsFiddle with example you can edit
overflow:hidden
prevents collapsing margins but it's not free of side effects - namely it... hides overflow.
Apart form this and what you've mentioned you just have to learn live with it and learn for this day when they are actually useful (comes every 3 to 5 years).
Every webkit based browser should support the properties -webkit-margin-collapse
. There are also subproperties to only set it for the top or bottom margin. You can give it the values collapse (default), discard (sets margin to 0 if there is a neighboring margin), and separate (prevents margin collapse).
I've tested that this works on 2014 versions of Chrome and Safari. Unfortunately, I don't think this would be supported in IE because it's not based on webkit.
Read Apple's Safari CSS Reference for a full explanation.
If you check Mozilla's CSS webkit extensions page, they list these properties as proprietary and recommend not to use them. This is because they're likely not going to go into standard CSS anytime soon and only webkit based browsers will support them.
You can also use the good old micro clearfix for this.
#container::before, #container::after{
content: ' ';
display: table;
}
See updated fiddle: http://jsfiddle.net/XB9wX/97/
In newer browser (excluding IE11), a simple solution to prevent parent-child margin collapsing is to use display: flow-root
. However, you would still need other techniques to prevent adjacent element collapsing.
DEMO (before)
.parent {_x000D_
background-color: grey;_x000D_
}_x000D_
_x000D_
.child {_x000D_
height: 16px;_x000D_
margin-top: 16px;_x000D_
margin-bottom: 16px;_x000D_
background-color: blue;_x000D_
}
_x000D_
<div class="parent">_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
</div>
_x000D_
DEMO (after)
.parent {_x000D_
display: flow-root;_x000D_
background-color: grey;_x000D_
}_x000D_
_x000D_
.child {_x000D_
height: 16px;_x000D_
margin-top: 16px;_x000D_
margin-bottom: 16px;_x000D_
background-color: blue;_x000D_
}
_x000D_
<div class="parent">_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
<div class="child"></div>_x000D_
</div>
_x000D_
Source: Stackoverflow.com