white space above div when text is entered inside the div

StackOverflow https://stackoverflow.com/questions/17766696

Question

I am having a strange issue with some odd whitespace above a div tag.

The problem white space is just above the black header at the top. The odd thing is that this space only appears when I enter text within the <div id="#header">. I have tried adding margin 0 and padding 0 to the #header div tag but nothing works. As soon as I comment out the h1 tag, the white space goes away. The same issue occurs in Firefox as well as Chrome.

Here is my html code...

    <!DOCTYPE HTML>

<head>

    <title>Test Site</title>

    <link rel="stylesheet" type="text/css" href="./css/style.css"/>

</head>

<body>

    <div id="header">

        <h1>My test site</h1> 
    </div>

    <div id="navbar">
    </div>

    <div id="main_window">
    </div>


</body>

Here is my CSS...

 html {
    padding: 0;
}

body {
    margin: 0%;
    padding: 0%;
    font-family: sans-serif;
}

#header {
    background-color: black;
    height: 150px;
    margin: 0px;
    color: white;
}

#header, h1 {
/*position: absolute;*/
bottom: 0;
}

#navbar {
    background-color: darkblue;;
    height: 40px;
    box-shadow: 0px 10px 8px #888888;
}

Any help would be appreciated.

UPDATE:

the same thing is happen to a different section on my site...

<div id="navbar">
        <div id="navbar_container">
            <ul>
                <li class="navlink"><a href="./rlg.php" >RLG</a></li>
                <li class="navlink">Test</li>
                <li class="navlink">Test 2</li>     
            </ul>
        </div>
    </div>




#navbar {
    background-color: darkblue;;
    height: 40px;
    box-shadow: 0px 10px 8px #888888;
}

#navbar_container {
    width: 1000px;
    margin: 0px auto;
}

.navlink {
    display: inline-block;
    padding-right: 2px;
    border-right: 1px solid white;
}

.navlink, a {
    margin: 0px auto;
}
Was it helpful?

Solution

Check out this question about the "user agent style sheet". Basically there's some built in CSS that your browser does by default, and it affects your h1 in particular in this case. The h1 has margin above and below and that's what's causing your whitespace. So try adding css to the h1 not the #header div.

OTHER TIPS

you must set margin:0px for H1 tag

see the example :

Example

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top