css - 具有不同字体大小文本的行内 block 元素的垂直尺寸

Question

我有一系列带有 display: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