CSS Margin Issue

Question

i have an issue with my css where if i use margin: 0 instead of margin-top: 0, for header p, the header { margin: 0 0 20px; } will be as good as not there. isit supposed to be like that? if i see what happens in firebug, its because the margin-bottom of header collapsed into the next sibling, the section.

html

<header>
    <h1>ToDo List</h1>
    <p>HTML5 Offline Capable Web Application</p>
</header>

css

header { font: 24px/1em Notethis; color: #666; margin: 0 0 20px; }
header h1 { font: 60px/1.4em Hetilica; margin: 0; }
header p { margin-top: 0; } 

Answer 1

I think that the problem here is that your header element is not actually rendering any margin applied to it at all. The space you are seeing is actually the result of a default margin applied to header p.

The reason I say this is that many browsers will not automatically treat the header tag as a block-level element unless explicitly defined as such:

header { display: block; }

After applying this statement to header in your CSS I could successfully apply header p { margin: 0 } and retain the margin specified in header itself. Removing this statement will revert back to the behaviour you are seeing.

Answer 2

By default, Firebug only show you part of the story.

To see what really happens when you change margin-top: 0; for margin: 0 0 0 0;, please click on the arrow right to the Style tab (above 'header p' on your snapshot) and select "Display default CSS properties" or sth like that and you'll see downward that html.css already styles p as:

p {
    display: block;
    margin: 1em 0;
}

Beware, do NOT modify system styles or you'll have to restart Firefox, reopening tabs won't be sufficient.

BTW this 1em margin is what you see in HTML without any style (menu Display / Page style / No style in Firefox or CSS menu of Web Developer Toolbar) : your paragraphs have some vertical margin.

So basically you erased a 1em bottom margin.