参见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>
p当您将div的高度限制为16px时，请注意的底部被切除了。对我来说，这表明文本上方没有未使用的空间。垂直对齐可能有问题。但是，当我想精确控制文本的高度和对齐方式时，该如何避免该问题呢？
这是因为line-height用户代理应用了默认值。一些web浏览器应用line-height的1.2em或1.2或120%到的元素，同时规范建议：
我们建议使用的值
normal介于1.0到1.2之间。
CSS Level 2规范指出：
在内容由内联级别元素组成的块容器元素上，
line-height指定元素内线框的最小高度。最小高度由基线上方的最小高度和基线以下的最小深度组成，就像每个行框都从具有元素的字体和行高属性的零宽度的行内框开始一样。
可接受的值为 normal | <number> | <length> | <percentage> | inherit
因此，您可以通过在元素上添加line-heightof16px或简单地将100%or1em或or的值覆盖应用的值1。（单击每个以查看演示）。
<number>-例如line-height: 1-是的首选值，line-height因为它始终表示元素的字体大小。因此，您不必为不同的字体大小指定不同的值。
有关这些值之间的差异的更多信息，您可以在这里参考我的答案：
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句