white space above div when text is entered inside the div

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;
}

try using *{padding:0;margin:0} in your css – Hushme Jul 20 '13 at 21:10 — Hushme, Jul 20 '13 at 21:10
this is bad idea , this affect to all elements! – Mohammad Masoudian Jul 20 '13 at 21:13 — Mohammad Masoudian, Jul 20 '13 at 21:13

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

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.

edited May 23 '17 at 11:57

Community

1
1

answered Jul 20 '13 at 21:11

matty-d

2,623
3
18
21

score 1 · Answer 2 · answered Jul 20 '13 at 21:11

1

you must set margin:0px for H1 tag

see the example :

Example

answered Jul 20 '13 at 21:11

Mohammad Masoudian

3,483
7
27
45

white space above div when text is entered inside the div

2 Answers2