为什么在块内嵌套内联会在底部产生1 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间隙。为什么它在那里，如果你是我，你将如何使它消失？

小提琴

​

​

Answer 1

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

这里的例子

nav > span {
    display: inline-block;
}

或者，block的显示也能工作。关键是它不再是一个纯inline元素。

Answer 2

我明白你的意思，它确实出现(在火狐上)，没有放大。我认为问题在于浏览器中给文本的默认line-height，这会在文本行之间产生一些额外的空间。

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

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

这里有一个更新的JSFiddle来演示它。在Firefox和Chrome中，似乎都能正常工作。不过，如果你有什么问题，请告诉我。希望这能有所帮助！