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

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

我试图理解元素的垂直维度来自哪里

下面是简单的代码：

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

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

我真的不明白为什么字体大小的文本高度：44px实际上是51px，14px是17px。

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

---

它与

线条高度有关

如果要对齐，请将
字体大小
和
行高
设置为相同

对于内联元素（即
）：在默认情况下为
伪元素之前，高度由字体和浏览器决定

如果在
:before
伪元素上设置
display:inline block
，则如果需要，可以使用
height
属性设置其高度。
确实它与线高度一起工作，但这里的问题是理解为什么在不明确设置线高度的情况下，这些值与指定的字体大小值以及它们的来源不同？因为默认的
行高
大约是所述
字体大小
值的1.1倍
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
}