具有不同字体大小的文本的内联块元素的垂直尺寸

Question

我有一系列显示元素：inline-block。它们包含不同字体大小的文本，并且彼此相邻显示。

我试图了解元素的垂直尺寸来自何处。

以下是简单的代码：

<a class="icon"></a>
<a>H</a>
<a class="icon"></a>
<a>H</a>
<a class="icon"></a>

和CSS：

a {
  font-family: consolas;
  display: inline-block;
  padding: 10px;
  font-size: 14px;
}

.icon:before {
  content: "H";
  font-size: 44px;
}

a:not(:empty) {
  padding: 25px; // (44-14) / 2 + 10
}

现在，与我的预期相反，25px不是用于补偿字体大小差异的填充的正确值，但是27px是。

我真的不明白为什么font-size的文本高度：44px实际上是51px而14px的文本高度是17px。

一旦考虑了这些值，就有意义了（51 - 17）/ 2 + 10 = 27是正确的填充补偿。

See fiddle here

Answer 1

它与line-height

有关

如果您希望它们对齐，请将font-size和line-height设置为相同。

DEMO

Answer 2

对于内联元素，默认情况下是:before伪元素，高度的确定取决于字体和浏览器，CSS 2.1 spec。 / p>

如果您在display: inline-block伪元素上设置:before，则可以根据需要使用height属性设置其高度。