如何计算内联元素的高度

Question

我有一个span带有以下CSS 的元素:

span.test {
  font-size: 20px;
  line-height: 1;
}

为什么计算出的跨度高度似乎是22px？这2个额外像素来自哪里？

是否可以在不使用的情况下使其高达20px inline-block？

这是我以前测试的简单的jsbin:http://jsbin.com/tigevecemoco/1/edit

Answer 1

CSS 2.1规范说：

10.6.1内联非替换元素

'height'属性不适用。内容区域的高度应基于字体，但是此规范未指定如何。

发生这种情况时，未替换的内联元素的高度（而不是行高）对其他任何元素都几乎没有影响，因此浏览器可以随意在此处报告所需的任何数字。

但是，进行一些逆向工程可能会有所启发。

如果我们查看Times New Roman的字体规格，我们将看到EM大小为2048，WinAscent为1825和WinDescent为443。将上升和下降之和除以EM大小，再乘以字体大小（20px）并四舍五入到整数，我们得到22px。

以Arial作为另一种字体，我们的EM大小为2048，WinAscent为1854，WinDescent为434。再次进行计算，再次得到22px。

那其他字体呢？Tahoma的EM大小为2048，WinAscent为2049，WinDescent为423。再次进行计算，这次我们得到24px。嘿，请记住，如果您尝试使用Tahoma字体尝试JsBin，则Firefox的高度确实为24px。

上面的字体规格是通过将字体加载到Type Light 3.2中获得的。

这不是决定性的，而是有关其所有工作原理的合理建议。

是否可以在不使用inline-block的情况下使其高20px？

假设以上内容正确无误，那么您应该能够通过使用自定义字体并修改该字体的字体规格来实现此目的。我不想预测这样做的连锁反应。