Unexplainable whitespace?

Question

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?

The space between the header and the nav attribute :) The weird thing is, when trying 'inspect element', there doesn't seem to be anything there, no margin, no attribute.. — Lisa
– Lisa, Commented May 20, 2014 at 20:39
@Falcon: Thanks, that was it! But why doesn't it show in 'expect element'? — Lisa
– Lisa, Commented May 20, 2014 at 20:41

mobabur94 · Accepted Answer · 2014-05-20 20:39:32Z

5

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

jsfiddle

Try setting the margin to zero:

ul { margin: 0; }

answered May 20, 2014 at 20:39

mobabur94

3702 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mike Brant Over a year ago

You should also STRONGLY consider using a CSS reset. These allow you to remove browser-specific default CSS styles so that you are working with more of a blank canvas so to speak.

mobabur94 Over a year ago

Yeah, those are awesome. I like normalize

falcon Over a year ago

It's a shame, that developers of browsers couldn't do that "normalized". I don't get why there are some default styles.

Lisa Over a year ago

Thanks! I actually was looking for that but didn't remember it's name :)

j08691 · Accepted Answer · 2014-05-20 20:40:00Z

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

#mainMenu ul{ margin-top:0; }

jsFiddle example

Marc Audet · Accepted Answer · 2014-05-20 20:46:19Z

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.

Nawed Khan · Accepted Answer · 2014-05-20 21:14:00Z

0

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

edited May 20, 2014 at 21:14

answered May 20, 2014 at 20:43

Nawed Khan

4,3911 gold badge12 silver badges23 bronze badges

1 Comment

The Guy with The Hat Over a year ago

This answer turned up in the low quality review queue, presumably because you didn't explain some of the contents. If you do explain this (in your answer), you are far more likely to get more upvotes—and the questioner actually learns something!

Collectives™ on Stack Overflow

Unexplainable whitespace?

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

1 Comment

Linked

Related