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.