Comments on: CSS: Weird margin-top CSS bug? I think?

By: Andrew Mabbott

Andrew Mabbott — Fri, 24 Apr 2009 11:53:49 +0000

This has been causing me a real headache so it’s good to see some explanation and to find out that CSS margin collapsing is what I need to read up on!

I understand why it would be useful for margin to collapse on adjacent elements but I’m still confused as to why it makes sense for parent elements to inghrit child margins like this.

Also, from my testing it doesn’t seem to extend up to the body element - surely if the outer div is directly inside the body element and the body has no margin, then the body should inherit margin from the inner div??

Incidentally, I noticed that IE<=7 doesn’t render this properly but that MS have fixed this in IE8 - hopefully another sign of IE’s increased convergence with the other browsers.

By: Onsitus

Onsitus — Wed, 22 Apr 2009 06:47:22 +0000

Ciao, I done some testing yesterday (also wrote an article on the argument - haven’t done yet the traduction in english though).
Other solutions: using position:absolute; or il float left/right or overflow:hidden;

By: jeremychone

jeremychone — Tue, 21 Apr 2009 18:05:56 +0000

Tx Onsitus, yes, I think you are right, it is “unfortunately” not a bug. I understand better the rational, but the problem with padding is that it is not as consistent across browser (i.e. IE 7). Thanks for dropping by.

By: Onsitus

Onsitus — Tue, 21 Apr 2009 07:20:16 +0000

Ciao, I got there as I saw that you linked to our site (from Flepstudio I am). I don’t think that this is a bug but due to the margin collapsing, 2 margin-top which touch each other (same thing for margin-bottom it should be. It does not sum up the total of the margin but apply the biggest value to the most ‘outside’ element. If you add content to the blu div (before the red one), the margin-top are not in contact anymore and their value are respected. An easy solution would be to apply a padding-top or border-top to the main div (the blue one) of one px so to create a space in between the 2 top margin and avoid the collapsing.

By: jeremychone

jeremychone — Mon, 02 Mar 2009 15:47:22 +0000

@Dan thanks for looking at it. I will add more example this week.

By: Dan Ott

Dan Ott — Fri, 27 Feb 2009 19:01:30 +0000

Jeremy -

I don’t see it in FF 3. Looking at it in firebug, it appears the margin is applied correctly. Is there more markup/styling to this example? That might help clarify the issue more.