tag causes space between header and top of page

Question

I am trying to make a webpage that looks at least a little decent, with a header and content and all, but I ran into a problem. I have this odd space between my header and the top of my page. After a while I found out the <h1> tag was the culprit. I want to have large text there, but don't know how without this odd problem popping up.

How can I keep the <h1> tag there, and remove the unwanted gap?

body {
    margin: 0px;
    height: 2000px;
    background-image: url(http://images6.alphacoders.com/334/334927.jpg);
    background-attachment: fixed;
}
#wrapper {
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
}
#header {
    float: top;
    margin: auto;
    width: 100%;
    height: 70px;
    top: 0px;
    background: grey;
    box-shadow: 3px 5px 5px #555;
}
#content {
    background: white;
    width: 960px;
    margin: 20px auto;
}

<div id='wrapper'>
    <header>
        <div id='header'>
             <h1>Lorem ipsum dolor sit amet</h1> 
            <!-- if you remove the h1 tags the header fits at the top !-->
        </div>
    </header>
    <div id='content'>
        <div class='post'>dsgsdfgsdfg</div>
        <div class='post'>dsgsdfgsdfg</div>
        <div class='post'>dsgsdfgsdfg</div>
        <div class='post'>dsgsdfgsdfg</div>
    </div>
</div>

make sure the `
` has no margins/padding. they're usually defined with a line or two worth of blank space, since they're HEADINGS, and intended to display a clear separation from "previous" content. — Marc B, Jul 03 '15 at 19:18
Should probably remove this question since you just need to add a margin: 0; to the h1. — Chrillewoodz, Jul 03 '15 at 19:19
It's a very simple one indeed, however it's a good question, it will help other CSS beginners who are looking for the same answer in the future, so I'd say keep it. — Stickers, Jul 03 '15 at 19:21
There is a invalid line of CSS `float:top;` it doesn't exist, the correct [`float`](https://developer.mozilla.org/en-US/docs/Web/CSS/float) values are normally `left`, `right` and `none`, but in fact you don't need it at all in the case, so just remove it. — Stickers, Jul 03 '15 at 19:31
@Pangloss Yes, i was experimenting with that and didn't bother to remove it. Thanks for pointing that out. — MintyChipp, Jul 04 '15 at 15:54
Please remove height:2000px; from body ... that will cause bugs on different devices. — Mladen Skrbic, May 09 '19 at 21:20

score 4 · Accepted Answer · answered Jul 03 '15 at 19:18

4

Heading tags have default margin set from the browser. You can reset it by doing:

h1 {
    margin: 0;
}

answered Jul 03 '15 at 19:18

Stickers

75,527
23
147
186

Thanks, another thing that worked for me was setting the padding to 1 or more pixels in the header div, but this makes it so there isn't any offset. This is a great answer :) – MintyChipp Jul 04 '15 at 15:53
That is very interesting, alternatively you can also set overflow:hidden on the header div, the grey area will then cover the whole block including the margin, but it's not recommended in your case, since you have a fixed height of 70px on the div. – Stickers Jul 05 '15 at 02:06

score 0 · Answer 2 · answered May 09 '19 at 20:46

0

overflow: auto

Use overflow: auto on the parent tag if you want to keep the margin but remove the white space.

answered May 09 '19 at 20:46

gilbert-v

1,263
1
11
23

score 0 · Answer 3 · answered May 10 '19 at 05:11

0

use the following in your css.

        *{
        margin: 0 auto; 
        padding: 0 auto;
    }

answered May 10 '19 at 05:11

SM Imtiaz Hussain

447
4
5

tag causes space between header and top of page

tag causes space between header and top of page

` has no margins/padding. they're usually defined with a line or two worth of blank space, since they're HEADINGS, and intended to display a clear separation from "previous" content.

3 Answers3

overflow: auto