Weird space after inline-block. Not between [duplicate]

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.