如何计算一个内联元素

的高度我有一个span元素与下面的CSS：如何计算一个内联元素

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

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

enter image description here

是否有可能使高大的20像素，而无需使用inline-block？

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

来源

2014-09-25 tyrion

行高做代码中的任何事情吗？ – 2014-09-25 14:43:34

似乎不是...... – tyrion 2014-09-25 14:44:12

'line-height：1'似乎像'line-height：100％'一样，都将line-height设置为20px（font-size）。我无法辨别额外像素来自哪里，但我确实看到它们。在Chrome中进行测试。 – GolezTrol 2014-09-25 14:45:18

The CSS 2.1 spec says:

10.6.1串联，非替换元素

的 '高度' 属性不适用。内容区域的高度应基于字体，但本规范未指定方式。

事实上，一个非替换内联元素的高度与其它行内元素的高度相比，对其他任何内容都没有影响，所以浏览器可以自由地报告他们喜欢的任何数字。

但是，一点逆向工程可能是有益的。

如果我们查看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。嘿presto，如果你用Tahoma字体尝试你的JsBin，Firefox确实显示了24px的高度。

上述字体指标是从将字体加载到Type Light 3.2中获得的。

不是确凿的，而是关于它是如何工作的合理建议。

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

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

来源

2014-09-25 16:24:45 Alohci

另请参阅[第10.8.1节]（http://www.w3.org/TR/CSS21/visudet.html#line-height），其中讨论了如何计算线框的高度（或可能）尊重行高，但请注意，无论如何它都参考了第10.6.1节。 – BoltClock 2014-09-26 02:58:34

我无法找到一个答案，为什么它被应用。我发现很多论坛上同样的问题...

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

是否有可能使高大的20像素，而无需使用inline-block的？

我设法只通过浮动元素。它似乎失去了它正在填充它...然后，将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

来源

2014-09-25 15:00:41 LcSalazar

try use "line-height"

'线hieght：1' 从亲本遗传。尝试自己的行高。

来源

2014-09-25 15:01:08 Syoki

它似乎不适合我。如果我设置'line-height：20px'，它仍然是'22px'高。你能联系我你的jsbin吗？ – tyrion 2014-09-25 15:06:40

MDN line-height

why the span's line-height is useless

希望这有助于。

来源

2014-09-25 15:10:47

虽然这些链接可能回答这个问题，但最好在这里包含答案的重要部分，并提供供参考的链接。如果链接页面更改，则仅链接答案可能会失效。 – BoltClock 2014-09-26 02:55:39

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

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

来源

2014-09-26 02:41:09 David

如何计算一个内联元素

回答

相关问题