如何计算内联元素的高度 [英] How to calculate the height of an inline element

问题描述

我有一个 span 元素与以下CSS：

I have a span element with the following CSS:

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

为什么span的计算高度似乎为22px？这两个额外的像素来自哪里？

Why the calculated height of the span seems to be 22px? Where do these 2 extra pixels come from?

是否可以使其高度为20px，而不使用 inline-block ？

Is it possible to make it tall 20px without using inline-block ?

这里是我用来测试的简单jsbin： http：/ /jsbin.com/tigevecemoco/1/edit

Here is the simple jsbin I used to test: http://jsbin.com/tigevecemoco/1/edit

推荐答案

CSS 2.1规格说明：

10.6.1内嵌未替换元素

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

The 'height' property does not apply. The height of the content area should be based on the font, but this specification does not specify how.

非替换的内联元素的行高与其他任何东西的影响非常小，因此浏览器可以自由报告他们喜欢的数字。

As it happens the height, as opposed to the line-height, of a non-replaced inline element has very little effect on anything else so browsers are pretty free to report whatever number they like here.

如果我们看看Times New Roman的字体指标，我们可以看到EM大小为2048，WinAscent为1825，WinDescent总和的上升和下降，除以EM大小，乘以字体大小（20px）和round到整数，我们得到22px。

If we look at the font metrics for Times New Roman, we see EM size of 2048, WinAscent of 1825, and WinDescent of 443. Sum the ascent and descent, divide by the EM size, multiply by the font size (20px) and round to the integer and we get 22px.

Take Arial作为另一种字体，我们有EM大小为2048，WinAscent为1854和WinDescent为434.重新计算，我们再次得到22px。

Taking Arial as another font, we have EM size of 2048, WinAscent of 1854, and WinDescent of 434. Do the calculation again and we again get 22px.

不同的字体？ Tahoma的EM大小为2048，WinAscent为2049，WinDescent为423.重新计算，这次我们得到24px。如果你尝试你的JsBin与Tahoma字体，Firefox确实显示一个24像素的高度。

What about a different font? Tahoma has EM size of 2048, WinAscent of 2049, and WinDescent of 423. Do the calculation again and this time we get 24px. And hey presto, if you try your JsBin with the Tahoma font, Firefox does indeed show a height of 24px.

上面的字体指标是从加载字体到< a href =http://www.cr8software.net/typelight.html =nofollow> Type Light 3.2 。

The font metrics above were obtained from loading the fonts into Type Light 3.2.

不确定，

有没有使用inline-block可以让它高20px？

Is it possible to make it tall 20px without using inline-block ?

假设上面是正确的，你应该能够通过使用自定义字体并修改字体的字体指标来实现它。我不想预测这样做的连锁效应。

Assuming the above is correct, you should be able to achieve it by using a custom font and modifying the font metrics of that font to suit. I wouldn't like to predict the knock-on effects of doing that though.

这篇关于如何计算内联元素的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！