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?
There are two main types of margin collapse:
Using a padding or border will prevent collapse only in the latter case. Also, any value of
overflow different from its default (
visible) applied to the parent will prevent collapse. Thus, both
overflow: auto and
overflow: hidden will have the same effect. Perhaps the only difference when using
hidden is the unintended consequence of hiding content if the parent has a fixed height.
Other properties that, once applied to the parent, can help fix this behaviour are:
float: left / right
You can test all of them here: http://jsfiddle.net/XB9wX/1/.
I should add that, as usual, Internet Explorer is the exception. More specifically, in IE 7 margins do not collapse when some kind of layout is specified for the parent element, such as