内联块后的奇怪空间。不在[重复]之间

Question

我有这个 html 代码：

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

还有这个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

正如在 jsfiddle 上看到的，在 ul 之后有空格，但 nav 更高。将 ul 设置为 100% 无济于事，而且似乎也不是保证金。它是什么？ 空间：http://i.imgur.com/NSKqsUV.png

Answer 1

您好，请在此处查看http://jsfiddle.net/j5LLR/1/ 它有效。问题是因为使用：

display: inline-block;

给你的 ul。所以我添加了

vertical-align: top;

那里也是。不幸的是，inline-block 会导致许多奇怪的空间问题。

Answer 2

使body 拥有margin: 0。

这将解决问题！

这是小提琴：

http://jsfiddle.net/j5LLR/

Answer 3

将vertical-align 更改为ul 默认为baseline 使用line-height 进行计算，其他值会产生该差距：

'inline-block' 的基线是其在正常流中的最后一个行框的基线，除非它没有流内行框或者它的 'overflow' 属性具有除 'visible 之外的计算值'，在这种情况下，基线是底部边缘。

nav ul {
  vertical-align:top;
}

演示http://jsfiddle.net/n9uu4/2/