How to remove empty space above header?

Question

I have a very simple header:

<header>
    <h1>Hello Everybody</h1>
</header>

And I have this CSS:

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

header {
    background:lightgray;
    margin:0;
    padding:0;
    height:100px;
    position:relative;
}

But, I can not position my header on the top of the page. There is some blank space left.

I don't know why is that. Please help.

Answer 1

The h1 tag you have in your header has a default .67em margin. You need to set your h1 tag to margin-top: 0px; in order to get rid of the extra white space.

html, body {
    margin:0;
    padding:0;
    height:100%;
    width:100%;
}

header {
    background:lightgray;
    margin:0;
    padding:0;
    height:100px;
    position:relative;
}

h1{
    margin-top: 0px;
}

That should do the trick.