html - 为什么 div 比 font-size 大？

Question

参见 http://jsfiddle.net/6taruf65/1/

以下 html 在 Windows7 上的 Firefox31 和 Chrome36 中显示为 20 像素高。我预计它的高度为 16 像素。

<style>
* { margin: 0; padding: 0; border: 0; overflow: hidden; vertical-align: baseline; }
</style>
<div style="font-size: 16px;">help 16px</div>

请注意，当您将 div 的高度限制为 16px 时，p 的底部被截断了。这对我来说意味着文本上方有未使用的空间。这可能是垂直对齐的问题。但是，当我想精确控制文本的高度和对齐方式时，我该如何避免这个问题呢？

Answer 1

这是因为默认line-height由用户代理应用的值。一些网络浏览器应用 line-height的 1.2em或 1.2或 120%规范中的元素 recommends :

We recommend a used value for normal between 1.0 to 1.2.

CSS 2 级规范规定:

line-height

On a block container element whose content is composed of inline-level elements, line-height specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties.

可接受的值为 normal | <number> | <length> | <percentage> | inherit

因此，您可以通过添加 line-height 来覆盖应用的值的 16px或者只是 100% 的值 或 1em 或 1 到元素。 (单击每一个以查看演示)。

<number> - 例如line-height: 1 - 是 line-height 的首选值因为它总是指元素的字体大小。因此，您不必为不同的字体大小指定不同的值。

有关这些值之间差异的更多信息，您可以在此处引用我的回答:

• Calculate line-height with font in rem-value