html - 行高和字体大小的变化导致内联 block 元素中出现间隙

Question

我正在组合一个简单的导航栏。最初我只是想让所有链接垂直居中，所以我使用了以下 CSS，它满足了我的需要:

.link {
    display: inline-block;
    line-height: 3em;
    height: 3em;
}

然后我希望我的一些链接使用更大的字体。我通过在每个元素上设置不同的 line-height 和 font-size 属性来做到这一点，但是我确保行高将相对于父元素计算为 3em:

.link1 {
    display: inline-block;
    font-size: 1.5em;
    line-height: 2em;
}
.link2 {
    display: inline-block;
    font-size: 2em;
    line-height: 1.5em;
}

在执行此操作时，我注意到元素上方和下方有一些小带，其中元素在垂直方向上略有偏移。

我创建了一个 JSFiddle here来演示这个问题。我怀疑我可以用 float: left 和 clearfix 来解决这个问题，但我想听听解决它的“正确”方法。

总而言之，我在这里想要实现的只是具有相同高度但不同字体大小的 div，并且文本垂直居中。

非常感谢您的帮助。

Answer 1

跨度的line-height是相等的，但默认情况下它们在文本的基线上垂直对齐。由于文本在跨度中垂直居中，因此较小文本的基线在跨度中较高。因此，当基线对齐时，字体较小的跨度的顶部低于其他跨度的顶部。

您可以使用vertical-align: middle(或top或bottom，基本上除了默认的之外的任何内容来垂直居中跨度>基线)如果你不介意你的文本实际上是垂直居中的。这为您提供了您正在寻找的内容，尽管由于基线不再对齐，较小的文本可能看起来有点“ float ”。

(另请注意，height 属性对跨度没有影响)。