Question

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

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

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

enter image description here

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

以下是我用来测试的简单jsbin：http://jsbin.com/tigevecemoco/1/edit

Answer 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中获得的。

没有定论，但是对它如何运作的合理建议。

是否可以在不使用内联块的情况下将其设置为高20px？

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

Answer 2

我无法找到应用原因的答案。我发现许多论坛都有同样的问题......

但是，作为对您的要求的回答：

是否可以在不使用内联块的情况下将其设置为高20px？

我设法只通过浮动元素来实现。它似乎失去了填充它的任何东西......然后，将line-height设置为特定的20px使它工作。

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

<span class="test">A</span>

修改

实际上，添加float是有效的，因为它使inline个元素的行为类似于block元素。

请参阅：https://developer.mozilla.org/en-US/docs/Web/CSS/float

Answer 3

try use "line-height"

' line-height：1 '继承自父级。尝试自己的行高。

Answer 4

希望这有帮助。

Answer 5

我使用JS Bin http://jsbin.com/siqabekoloja/1/edit来解决您的问题。我能够在IE，Chrome和Firefox中保持一致。我认为问题是你需要阻止元素而不是内联元素。

希望这会有所帮助。如果你想让它们彼此相邻，只需向左或向右浮动它们。