How to Uncollapse a Margin

How do I uncollapse a margin?

well you need something in between to "break" the collapsing.

my first thought was to use a div with display:none set in between, but that doesn't seem to work.

so I tried:

<div style="overflow: hidden; height: 0px; width: 0px;">.</div>

which seems to do the job nicely (at least in firefox, don't have internet explorer installed here to test it...)

<html>
    <body>
        <div style="margin: 100px;">.</div>
        <div style="overflow: hidden; height: 0px; width: 0px;">.</div>
        <div style="margin: 100px;">.</div>
    </body>
</html>

How to disable margin-collapsing?

There are two main types of margin collapse:

Collapsing margins between adjacent elements
Collapsing margins between parent and child elements

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
position: absolute
display: inline-block / flex

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 width.

Sources: Sitepoint's article Collapsing Margins

Why no rule for un-collapsing margins

No, there are numerous other ways, including floating, clearance, absolute positioning, setting overflow to values other than visible, setting a certain min-height, etc, which you can determine based on what the spec says.

But you're right in that all of these are workarounds with various side effects and disadvantages, and there is no true "off switch" available in CSS like margin-collapse, not even in the CSS3 Box Model module. A possible rationale is that margin collapse is supposed to happen naturally, and therefore the only way it can be prevented is as a side effect, but that's just my guess, as I agree there are several cases where it isn't intuitive or appropriate.

That said, if you're feeling adventurous you could make a suggestion on the www-style mailing list, and see what they say. I don't think you're going to have much luck, though.

For what reason margin collapse rules were introduced in CSS?

This is one of the situations where it doesn't really make sense until you realise that the alternatives make less sense.

As you probably know, margins specify the distance between elements, it's not an "outer padding" that surrounds each element. If two elements with the margin 20px are next to each other, the distance between them is 20px, not 40px.

As the margin is a distance to another element, it makes sense that the distance is from the element to the surrounding elements, not to the boundary of the parent element.

If the margin would be counted to the boundary of the parent element, putting elements in a div element would introduce extra spacing between the elements eventhough the div itself has no margin or padding. The margins around an element should remain the same if you add an unstyled div around it.

How to Uncollapse a Margin

How do I uncollapse a margin?

How to disable margin-collapsing?

Why no rule for un-collapsing margins

For what reason margin collapse rules were introduced in CSS?

Related Topics

Leave a reply