Question

以下html在Firefox31和Windows7上的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：

我们建议normal的使用值介于1.0到1.2之间。

CSS Level 2 Spec状态：

<强> line-height

在块容器元素上，其内容由内联级别组成   元素，line-height指定行框的最小高度   在元素内。最小高度包括最小高度   高于基线，低于它的最小深度，就像每个   行框以零宽度内联框开头，带有元素的字体   和行高属性。

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

因此，您可以通过添加line-height 16px或仅 100% 或 {{3}的值来覆盖应用的值或 1em 到元素。 （点击每个以查看演示）。

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

有关这些值之间差异的更多信息，请参阅我的答案：

1

Answer 2

div大小不是20px，因为当字母大小低于基线时（例如p和q），字体大小大于20px。如果你想让div本身的高度为20px，只需将div css设置为height：20px。

JSFiddle

<div style="height: 20px; font-size: 20px; border:1px solid #444;">help 20px (with cut off text)</div>
<br />
<div style="height: 23px; font-size: 20px; border:1px solid #444;">help 20px (without cut off text)</div>
<br />

Answer 3

也许您需要line-height: 16px;

为什么div大于字体大小？

3 个答案: