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

Question

This question already has answers here:
Additional margin of 5px when inline-table or inline block is used [duplicate]
(4 answers)
Closed 8 years ago.
I have this html code:
<nav>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
<li>e</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/