4

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

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
Alex
  • 9,911
  • 5
  • 33
  • 52
  • Are you looking for an alternative fix or just an explanation... I am trying to think of a simple explanation as to why this is good way of doing things... – Marc Audet Jun 17 '13 at 19:36
  • as said, i need to be able to explain this. thank you – Alex Jun 17 '13 at 19:37
  • How CSS/HTML savvy is the explainee? – Marc Audet Jun 17 '13 at 19:38
  • about average, but I want to understand it myself sothat i can explain it further :) and i am somewhat kickass at css! :D (not as kick-ass to get this, though :D :D ) – Alex Jun 17 '13 at 19:39
  • 1
    There are many articles about how to work with collapsing margins, but no one talks about why it was designed that way... now you have me wondering! – Marc Audet Jun 17 '13 at 19:42
  • I see that you styled a paragraph tag with the class .headline -- I would consider using Heading (h1-h6) tags for your headings instead of p tags, as it will provide your pages with an SEO boost. – BJack Jun 17 '13 at 19:53
  • i know, this is not my markup. it doesnt matter anyways. its just about the margins – Alex Jun 17 '13 at 19:53

2 Answers2

9

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.

Marc Audet
  • 46,011
  • 11
  • 63
  • 83
  • 1
    The people who wrote the specs did not "invent" this idea. They adopted Netscape's behavior which was the leading browser at that time. Margin-top is calculated by taking the max of the two margins (parent vs child div). Add padding "solves" this issue because you break the continuity in the max calculation. Aside from padding you can use `display: table;` - this was written by CSS authors as it was the default behavior THEY wanted instead of adopting a pre-existing technology – ProfileTwist Jun 17 '13 at 20:25
  • @ProfileTwist Thank you for your comments! It would really be neat to interview the people who built the original Netscape and to discover how the thinking evolved and how the spec writers "reversed engineered" Netscape to come up with CSS 2.1 as we know it. Sometimes, the reasoning is a simple as "because it worked well enough". – Marc Audet Jun 17 '13 at 20:34
-1

I achieved your desired layout by:

  1. Resetting the default margins and padding on the p tags:

    p{ margin: 0px auto; padding: 0px; } Make sure you add this to the top of your CSS.

  2. Then changed the .headline and .text classes to use padding instead of margin; using your same values.

  3. Removed the #main .inner CSS entirely.

BJack
  • 2,404
  • 1
  • 13
  • 11