CSS field error

Question

I have a problem with my css, which, if I use margin: 0instead of margin-top: 0, for header p, header { margin: 0 0 20px; }will be as good as not there. Is this supposed to be so? when I see what is happening in firebug, it because margin-bottomof headercollapsed next brother 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 the problem here is that your element headerdoes not actually have any application marginto it at all. The space you see is actually the result of the standard marginapplied to header p.

, , , header , :

header { display: block; }

header CSS header p { margin: 0 } , header. , .

Answer 2

Firebug .

, margin-top: 0; margin: 0 0 0 0;, "" ( "header p" ) " CSS " sth , , html.css p :

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

, Firefox, .

, 1em - , HTML - ( Display/Page style/No style Firefox CSS -): .

, 1em.