为什么在块内嵌入内联会在底部创建1px的间隙？

Question

我有一个简单的结构

<nav>
    <span>
        <a href="#">A</a>
        <a href="#">B</a>
        <a href="#">C</a>
    <span>
<nav>

我在css上去了哥斯拉，例如。

margin:0px; padding:0px; vertical-align:bottom; box-sizing:border-box;

但无论我尝试什么，在元素的底部始终存在非常酷的1px间隙。为什么它在那里，如果你是我，你将如何让它消失？

fiddle

Answer 1

一种可能的解决方案是制作<span>元素inline-block。这将消除差距

EXAMPLE HERE

nav > span {
    display: inline-block;
}

或者，block的显示也有效。关键是它不再是纯inline元素。

Answer 2

我明白你的意思，它确实出现（在Firefox上）没有密切放大。我认为问题是浏览器中文本的默认line-height，这会在文本行之间产生一些额外的空间。

通过一些实验，我发现添加这些样式有效：

nav {
    font-size:16px; /* Default font size in Firefox, but specify just in case */
    line-height:18px;
}

这里有updated JSFiddle来演示它。似乎在Firefox和Chrome中正常工作。但是，如果您有任何问题，请告诉我。希望这有帮助！