« OpenWeb: Web-Based HTML Editors
OpenWeb: SVG vs Canvas »

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

February 27th, 2009 by jeremychone

I having been hitting a weird and annoying CSS bug (I think)
HTML

  <div id="header">
    <div id="title">My Lawyer.com</div>
  </div>

CSS

#title{
  margin-top: 10px;
}

Then, somehow, the margin-top of 10px get assigned to the #header div?

Now, the weird thing, is that if I add any text (i.e &nbsp;) just before the #title div class, then, the margin-top get appropriately assign to the #title div???

Now, even weirder, same behavior on Firefox 3.0.1, Google Chrome, and Safari????

Here is another example

The Blue box should be just below
  <div style="margin-top:0px;background-color:blue;width:50px;height:50px">
    <div style="margin-top:20px;background-color:red;width:10px;height:10px">
    </div>
  </div>

The Blue box should be just below this text (but it is 20 px down) and the red box should be 20px down the blue box, but it is 0px.

Any help greatly appreciated. Easy to work around, but kind of annoying.

Posted: Friday, February 27th, 2009
Tags: CSS, OpenWeb.
Actions: RSS 2.0 feed. You can leave a response, or trackback from your own site.

6 Responses to “CSS: Weird margin-top CSS bug? I think?”

  1. Dan Ott Says:
    February 27th, 2009 at 12:01 pm

    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.

  2. jeremychone Says:
    March 2nd, 2009 at 8:47 am

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

  3. Onsitus Says:
    April 21st, 2009 at 12:20 am

    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. :)

  4. jeremychone Says:
    April 21st, 2009 at 11:05 am

    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.

  5. Onsitus Says:
    April 21st, 2009 at 11:47 pm

    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;

  6. Andrew Mabbott Says:
    April 24th, 2009 at 4:53 am

    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.

Leave a Reply