Skip to content Skip to sidebar Skip to footer

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 h

Solution 1:

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

jsfiddle

Try setting the margin to zero:

ul {
    margin: 0;
}

Solution 2:

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

#mainMenuul{
    margin-top:0;
}

jsFiddle example

Solution 3:

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.

Solution 4:

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#mainMenuul{
   margin:0;
   padding:0;
 }

Post a Comment for "Unexplainable Whitespace?"