whitespace - Weird space after inline-block. Not between

Question

I have this html code:

<nav>
    <ul>
        <li><a href="#">a</a></li>
        <li><a href="#">b</a></li>
        <li><a href="#">c</a></li>
        <li><a href="#">d</a></li>
        <li><a href="#">e</a></li>
    </ul>
</nav>

And this css:

nav {
    display:block;    
}

nav ul {
    display:inline-block;
    width:100%;
    list-style-type: none;
    margin:0;
    padding:0;
}

nav ul li {
    float: left;
    width: 100px;
    height:100%;
    margin-right: calc((100% - 500px) / 4);
}

nav ul li:last-child { margin-right:0; }

nav a {
    display:inline-block;
    width:100%;
    height:100%;
}

JSFIDDLE HERE

As seen on jsfiddle there is white space after ul but nav is higher. Setting ul to 100% doesn't help and it doesn't seem to be margin. What is it? The space: http://i.imgur.com/NSKqsUV.png

Answer 1

Hi check here http://jsfiddle.net/j5LLR/1/ it works. The problem is because of using:

display: inline-block;

to your ul. So i ve added

vertical-align: top;

there too. Unfortunately inline-block causes many weird space issues.

Answer 2

Make the body have margin: 0.

That will fix the problem!

Here's the fiddle:

http://jsfiddle.net/j5LLR/

Answer 3

Change the vertical-align for ul for default is baseline making the calculation with line-height and other values create that gap:

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

nav ul {
  vertical-align:top;
}

The demo http://jsfiddle.net/n9uu4/2/