Firefox margin-top mystery

Firefox adds top margin to my layout

[erdy]

In firefox my centred fixed-width layout has a mysterious margin at the top of the header.
When I add a border to the header the margin-top disappears and it looks the same as ie (flush with
the top). But without theborder (how I want it) the margin re-appears.

Can anyone help?

[SuzyUK]

try a search for "collapsing margins [google.com]" one of the "cures" for which is a border

[LunaC]

This is weird, I was just having this exact problem today.

For me it happened in Firefox and Opera, turned out to be margin-top:20px; in the h1 inside that div was the problem, changed it to padding-top:20px; and now all browsers are showing the div properly.

I'm still confused why that worked, but no more mystery margin above that div and no border-top needed.

[Setek]

I'm still confused why that worked, but no more mystery margin above that div and no border-top needed.

Because you changed a top margin of 20px to a top padding of 20px. Collapsing margins collapse... well... margins :)

Collapsing margins collapse when two elements sit flush inside one another if not for plain margin - that is, there is no padding on the parent, no border on the child, etc.

You fixed it by no longer having a margin on the child, which would normally amalgamate into the parent's margin.

You can also fix it by having a border. You can also keep both with margins and stopping them from collapsing with 1px (or however much you feel like) worth of padding on the parent element. Or you could wipe out the margin altogether and just use padding.

These collapsing margins are annoying. Why do we have them?
Well, believe it or not, they're actually quite cool :) In instances where padding just doesn't suit (padding never collapses) you can make use of collapsing margins to get nice typeset in a document.

For instance, I want 15px of space on all my headings, so it will always be 15px away from the other document elements (my paragraphs, my lists, etc.) I want 10px of space on all my paragraphs, and all my lists also. Doing this:

h1, h2, h3, h4, h5, h6 { padding: 15px 0; }
p, ul, ol { padding: 10px 0; }

.. will not give me what I want. It will give me 25px in between my headings and my paragraphs, and it will give me 20px between two paragraphs. That's not kosher, is it? :)

However, by making use of collapsing margins:

h1, h2, h3, h4, h5, h6 { margin: 15px 0; }
p, ul, ol { margin: 10px 0; }

We will get 15px in between my headings and paragraphs, and 10px in between two paragraphs.

And yes, there are ways around it [fixing non-collapsing padding to look like collapsing margins], like setting 5px padding to the top and bottom of paragraphs and lists instead, etc, but it means you need to know that an element will be proceeded and preceded by another element. It's just easier to make use of collapsing margins.

Though most people don't see how normal collapsing margins look until they stop collapsing :P Typesetting has been ingrained subconsciously into us by every newspaper we've read, every book, for a very long time.

For more information about the funky world of typesetting, Mark Boulton has a set of five articles about typesetting for the web.

[edited by: SuzyUK at 9:33 pm (utc) on Jan. 23, 2007]
[edit reason] please no web design co.s with opinion there's tons here have them ;) [/edit]

[LunaC]

Ah :) I get it, thanks!

I hadn't thought of looking into 'collapsing margin' when it looked more like 'expanding margin' in this case. I'm going to read through that a few more times to make sure I fully understand. It'll save me many headaches in the future. Thanks again.

Edited to add:

1 more question, since the extra space above the div didn't show up in IE 6 or 7, wouldn't p { margin: 10px 0; } still show as 20px between paragraphs in IE?

Hmm, I'm using p {margin:1em 0;} and the space between looks the same in IE and Firefox, I must be misunderstanding something.

[edited by: LunaC at 8:33 pm (utc) on Jan. 23, 2007]

[Setek]

1 more question, since the extra space above the div didn't show up in IE 6 or 7, wouldn't p { margin: 10px 0; } still show as 20px between paragraphs in IE?

Funnily enough, I forgot to mention: IE doesn't collapse margins the way they're meant to :) No, it won't show up as 20px between paragraphs, because IE collapses the margin at that point, however, between a child paragraph and a parent

div

, IE won't collapse the margin between the two.

It seems IE will not collapse margins between child and parent elements, only between siblings (both children.)

[LunaC]

*light goes off above head*

Ah, that explains a lot of the quirky behavior I struggled with on one site.

I was playing around with this for a bit today and couldn't understand why sometimes IE'd collapse and other times didn't, your explanation makes sense.

Thanks again!