Can someone explain this css margin behaviour?

Question

A friend of mine had a problem with this simple html/ css task: http://jsfiddle.net/kaHzY/6/

The problem was that the .headline 's margin-top was pushing down the #main div although it should directly follow the nav without any space between.

Adding a div .inner with a padding of 1px solved this issue. The .headline still had the margin but was not pushing down the #main div anymore.

I know this behaviour but I cant explain it. How can you explain that, especially to someone who is learning css? Why does it behave like that?

Thanks

Answer 1

This is classic collapsing margin behavior.

The people who wrote the CSS spec thought this was a good idea in order to prevent excessive white space from being created by margins. Without this behavior, it would be a lot more work to control margin/whitespace between block elements.

References:

CSS2 Spec - http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Andy Budd Article - http://andybudd.com/archives/2003/11/no_margin_for_error/

Eric Meyer Article - http://www.complexspiral.com/publications/uncollapsing-margins/

Why Collapsing Margins Are a Good Idea

Collapsing margins are a feature of the CSS Box Model, which forms the basic working unit for the Visual Formatting Model, which allows us to have a rational environment in which to develop web pages.

In designing the CSS specification, the authors had to balance how how rules would be written, for example: margin: 1.0em, and how these rules would work in a CSS formatting engine that needs to layout block of content from top-to-bottom and left-to-right (at least in Western European languages).

Following the train-of-thought from Eric Meyer's article cited above, suppose we have a series of paragraphs with margins styled according to:

p { margin: 1.00em; }

For those of us who used to seeing printed pages with regular spacing between paragraphs, one would expect the space between any two adjacent paragraphs to be 1.00em. One would also expect the first paragraph to have a 1.00em margin before it and the last paragraph to have a 1.00em margin after it. This is a reasonable, and perhaps simplified, expectation of how the simple CSS rule for p should behave.

However, for the programmers building the CSS engine that interprets the simple p rule, there is a lot of ambiguity that needs to be resolved. If one is expecting the printed page interpretation of the CSS rule, then this naturally leads to the collapsing margin behavior. So the programmers come up with a more complicated rule like: if there are two adjacent p tags with top and bottom margins, merge the margins together.

Now this begs the question, how do you "merge margins together"? min or max of the adjacent top and bottom margins, average of the two? margin of first element always? And what if you have other block elements other than p's? and if you add a border or background? what next?

Finally, how do you compute all of these margin settings in such a way so that you don't have to iterate through the entire set of HTML elements several times (which would make complicated pages load slowly especially in early generations of browsers)?

In my opinion, collapsing margins offered a solution to a complicated problem that balanced the ease of writing CSS rules for margins, the user expectation of how printed pages are laid out in our typographic heritage, and finally, provided a procedure that could be implemented within the programming environment that browsers exist in.