Why am I getting white space between my HTML element?

Question

I'm trying to design a website for my mums backpackers business. The problem that I am having is between my banner image and my navbar there is a blank white line that you can see in the image. I thought this is to do with the margin so I have set it to zero for both of the elements to no avail.

Also a second question - Why does my black border not cover the main content as well? I thought since its a body background it would go around every element in the body.

I realise there may have been similar questions but I can't find the answer anywhere. I will appreciate anyones input - this is my first post here so I'm sorry if I screwed up any formatting.

The image of my website can be found here:

http://postimage.org/image/20dhjcdb8/

Thanks in advance.

I currently have the following code in my index.html file:

   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
        <head>
        <link rel="stylesheet" type="text/css" href="swaggersstyle.css">
            <title>Oamaru Backpackers Hostel, Swaggers Backpackers - Home</title>
        </head>


        <body>
        <img src="final.jpg" id="banner"></img>
        <ul id="nav">
            <li class="links"><a href="index.html">Home</a></li>
            <li class="links"><a href="planning.html">Planning</a></li>
            <li class="links"><a href="construction.html">Construction</a></li>
            <li class="links"><a href="evaluation.html">Evaluation</a></li>
        </ul>

        <div id="mainc">
        <p>Make Yourself at Home</p>
    <p>Swaggers Backpackers is a converted old house located within walking distance of all the best parts of Oamaru. Explore the old victorian era buildings and shops of the city centre, or see the penguin colonies down the street. Swaggers is owned and operated by camp mum Agra, who makes all guests feel welcome, informed, and perhaps a bit mothered. </p>

        </div>   

    </body>
    </html>

and the following CSS code:

html{
    font-family: sans-serif;
    background-color:#464E54;
}

body{
    width: 960px;
    margin: auto;
    background-color: white;
    border: 5px solid black;
}

#banner{
    padding: 0px;
    margin: 0;
}

#nav {
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    overflow: hidden;

}

#mainc {

    width: 960px;
    float: right;
    background-color: white;
    margin: 0;
}

.links {
    float: left;
    margin: 0px;
}

a:link, a:visited {

    display: block;
    width: 232px;
    font-weight: bold;
    color: grey;
    background-color: #dad8bf;
    text-align: center;
    padding: 4px;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 0px;
}

a:hover, a:active{

    background-color: #333333;
}

Can you publish the site and give us an online link? – Rami Alshareef Sep 18 '11 at 08:28 — Rami Alshareef, Sep 18 '11 at 08:28
http://pastebin.me/188842111b3069a3aa51932b1e021bd4 – sinelaw Sep 18 '11 at 08:38 — sinelaw, Sep 18 '11 at 08:38

score 3 · Accepted Answer · answered Sep 18 '11 at 08:34

The problem that I am having is between my banner image and my navbar there is a blank white line that you can see in the image. I thought this is to do with the margin so I have set it to zero for both of the elements to no avail.

In HTML images are by default inline level elements so they follow text rules (and will have blank space below to keep the correct alignment with letters like "p" and such). You can either assign display: block to the header image, or define the header container to have the same exact height as the image

Also a second question - Why does my black border not cover the main content as well? I thought since its a body background it would go around every element in the body.

Because floated elements pop out of their container, you have to clear the float to extend the container with something like

<div style="clear: both"></div>

or use some reset/clearfix css such as the one provided by html5boilerplate.

score 3 · Answer 2 · answered Sep 18 '11 at 08:34

3

add to your css

#banner { display: block; }

answered Sep 18 '11 at 08:34

Dim_K

571
2
15

score 1 · Answer 3 · answered Sep 18 '11 at 08:31

1

If you remove the float property of #mainc then the border will surround all the content. By using float, you are taking the div out of the main page flow.

answered Sep 18 '11 at 08:31

Paul Grime

14,970
4
36
58

Why am I getting white space between my HTML element?

3 Answers3

Linked