CODEWITHSUNDEEP
htmlcsswhitespace
Lisa
Lisa

Reputation: 893

Unexplainable whitespace?

I'm just coding something simple, but there seems to be an unexplainable whitespace in my result... And I can't seem to lose it!

To be clear: I mean the 'line' between the purple header and the white nav-attribute.

I tried getting rid of the tabs and spaces in my code, but it did not help.

Here's a simple fiddle: http://jsfiddle.net/LNhK5/

HTML:

<body>

<div id="wrapper">

    <header>
        <img class="logo" src="images/logo.png">
    </header>

    <nav id="mainMenu">
        <ul>
            <li>Nieuwsoverzicht</li>
            <li>Trending</li>
            <li>Lokaal nieuws</li>
        </ul>
    </nav>
</div>
</body>

CSS:

body{
    background-color:#ebebeb;
    margin:0;
    padding:0;
}

#wrapper{
    width:100%; 

    padding:0;
    margin:0;
}

header{
    background-color:#835497;

    height:70px;
    width:100%;

    margin:0;
    padding:0;
}

.logo{
    height:80%;

    display:block;
    margin: 0 auto 0 auto;
}

nav{
    background-color:#ffffff;

    height:45px;
    width:100%;

    margin:0;
    padding:0;
}

nav#mainMenu ul li{
    font-family:'source_sans_proregular';
    font-size:1.2em;
    color:#c2c2c2;

    display:inline-block;
    text-align:center;
    margin:0;
    padding:0;

}

Is it something I'm overlooking, or did I just make a typo-error?

Upvotes: 0

Views: 126

Answers (4)

Nawed Khan
Nawed Khan

Reputation: 4401

There is 0 margin and padding in your LI but not in UL. Therefore the default padding and margin of a UL still exist. To fix, please add this style:

 nav#mainMenu ul{
   margin:0;
   padding:0;
 }

Upvotes: 0

Marc Audet
Marc Audet

Reputation: 46785

The whitespace you are seeing is the result of a collapsing margin between the ul element and the header element.

If you add overflow: auto to the nav element, it will contain any margins of the child elements, in this case, the ul element.

You can control the top margin of ul by explictly setting the top margin value to zero to over-ride the default value.

Upvotes: 0

j08691
j08691

Reputation: 207901

Your list ul has a default margin. Remove it with:

#mainMenu ul{
    margin-top:0;
}

jsFiddle example

Upvotes: 0

mobabur94
mobabur94

Reputation: 370

Perhaps the whitespace you are talking about is due to the ul ?

jsfiddle

Try setting the margin to zero:

ul {
    margin: 0;
}

Upvotes: 5

Related Questions