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.

Does this answer your question? [How can I remove space (margin) above HTML header?](https://stackoverflow.com/questions/14423781/how-can-i-remove-space-margin-above-html-header) — Sebastian Simon, Dec 20 '21 at 16:51

score 3 · Answer 1 · answered Jun 30 '14 at 18:40

It's because your <h1> still has margins on it.

h1 {
  margin: 0;
}

EDIT:

Just as a quick note, if you only want to remove the top margin, do what @amol posted below, margin-top.

margin: 0 is shorthand for margin: 0 0 0 0, which combines all margin directions as such: margin: top right bottom left.

score 3 · Accepted Answer · answered Jun 30 '14 at 18:47

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.

score 1 · Answer 3 · answered Jun 30 '14 at 18:40

1

The <h1> tag within the header has a top margin which is pushing your <header> tag down.

answered Jun 30 '14 at 18:40

nicholaschris

1,401
20
27

score 1 · Answer 4 · answered Jun 30 '14 at 18:41

1

Heading tags have default margin, you can use following code

h1{
    margin-top: 0;
}

answered Jun 30 '14 at 18:41

amol

1,535
9
10

score 1 · Answer 5 · answered Jun 30 '14 at 18:54

1

This is why it is a good practice to use a reset css file to eliminate default formatting applied by the browser: http://www.cssreset.com/.

answered Jun 30 '14 at 18:54

DRD

5,557
14
14

score 1 · Answer 6 · answered Jul 02 '14 at 09:02

1

Use bottom margin only, remove top margin

h1{
    margin: 0 0 15px;
}

answered Jul 02 '14 at 09:02

score 0 · Answer 7 · answered Jun 30 '14 at 19:03

By default the h1 tag comes with a margin, all you have to do is to remove that margin, also some browsers like Google chrome add a default margin so you will also have to remove that margin from the body tag.

html, body {
  margin:0px;
  padding:0px;
}

h4 {
  margin:0px;
  padding:0px;
}

I hope this helped

score 0 · Answer 8 · answered Jun 30 '14 at 19:04

This is due to the nature of your h1 tag. It automatically applies some sort of margin, based on what browser you're using.

To remove the gap use the following within your CSS:

h1 {
margin: 0px;
}

For the future you want to use Google Chrome or Firefox+Firebug and use the built-in tools to look through all elements within a webpage. It'll save you a lot of time and increases your efficiency.

How to remove empty space above header?

8 Answers8