CODEWITHSUNDEEP
htmlcss
MintyChipp
MintyChipp

Reputation: 43

<h1> tag causes space between header and top of page

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>

Upvotes: 4

Views: 3222

Answers (3)

SM Imtiaz Hussain
SM Imtiaz Hussain

Reputation: 447

use the following in your css.

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

Upvotes: 0

gilbert-v
gilbert-v

Reputation: 1305

overflow: auto

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

Upvotes: 0

Stickers
Stickers

Reputation: 78766

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

h1 {
    margin: 0;
}

Upvotes: 4

Related Questions