Html 不同的行高和字体大小导致内联块元素中出现间隙

我正在组装一个简单的导航栏。起初，我只是希望所有链接都垂直居中，因此我使用了以下CSS，它满足了我的需要：

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

然后我想我的一些链接是在一个更大的字体大小。我通过在每个元素上设置不同的行高和字体大小属性来实现这一点，但是我确保行高将分别计算为父元素的3em：

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

在这样做的过程中，我注意到元素上下都有小条带，元素在垂直方向上有轻微偏移

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

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

---

非常感谢您的帮助。

跨距的

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

如果不介意文本实际垂直居中，可以使用
vertical align:middle
（或
top
或
bottom
，基本上是默认的
基线
）将跨距垂直居中。这就给出了你想要的东西，尽管看起来较小的文本有点“浮动”，因为基线不再对齐

（还要注意，
高度
属性对跨距没有影响）。
添加
垂直对齐：中间至
。键入
-@MaryMelody谢谢！您（或任何人）介意给我一个简短的解释，说明为什么这样可以解决这个问题吗？谢谢您对导致问题的原因以及如何解决问题的非常清楚的解释。