CSS line-height 属性大于 font-size 属性答案

【问题标题】：CSS line-height property larger than font-size propertyCSS line-height 属性大于 font-size 属性
【发布时间】：2012-09-06 23:58:20
【问题描述】：

我有一个非常烦人的问题，我想将图像的顶部与文本对齐，但字母实际上略低于行高。

我用一部经典电影创建了一个简单的示例来说明下面的问题。

HTML：

<img src="http://cf2.imgobject.com/t/p/w92/wcI3VMHw2TqtPVIkS4wpmxBJzWB.jpg" />
<p>Big</p>
<p>Admin</p>

CSS：

p, h4{
    font-size:1em;
    line-height:1em;
    vertical-align:top;
    margin:0;
    padding:0;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}

img{
    float:left;
    width:46px;
}

输出（在 Chrome 中）：

如您所见，虽然行高与图像顶部对齐，但文本本身却不是。我已经尝试了所有垂直对齐选项，但没有修复。

为什么行高大于字体大小，即使它们都设置为相同的尺寸？如何解决这个问题？

【问题讨论】：

标签： html styles css text-size

【解决方案1】：

这通常与排版有关，而不是 CSS。有许多垂直指南会影响字体设计。我假设您希望 cap height 匹配图像的顶部。

我在这里将您的示例添加到 jsfiddle：http://jsfiddle.net/ahXpH/1/ 并复制了它。如果放大，您可以看到“Big”中的“i”实际上比 B 高，而“g”超出了段落本身的范围。检查 Chrome 中的元素会发现 line-height 和 font-size 匹配。

要解决此问题，您必须调整 margin-top 并在视觉上将其对齐。对于我的 jsfiddle 版本，这恰好是 margin-top: -8px; 与 font-family: "Trebuchet MS" 和 font-size:48px。 (http://jsfiddle.net/ahXpH/4/) 但是，如果您删除“Trebuchet MS”并使用 Arial 的后备前端，您会看到它不再排列并且现在是图像上方的一个像素。

最终，我不确定是否有纯 CSS 解决方案。硬编码该值仅适用于一种字体，甚至可能因浏览器而异。

【讨论】：

真可惜，这似乎是一个非常简单和常见的要求，我想这就是我们仍然有 flash 的原因 :) 我猜负边距值会起作用，但是当你放大时会发生什么？必须尝试什么是最好的解决方案，也许使用否定的 em 会起作用。
选择通用字体会有所帮助，SVG 字体渲染可能会提供更多控制，但这会限制跨浏览器的兼容性。相反，更改您的设计可能是最简单的。
不能真正改变设计，但它不必绝对完美，所以负边距方法应该可以工作。
大写字母略低于字体高度的顶部。如果“E”延伸到顶部，例如“Ê”会发生什么？请注意，并非所有大写字母都一样高。即，在 Trebuchet MS 中，“B”高于“T”。因此，您需要微调演示文稿，以便以您喜欢的方式放置特定字符，可能是文本的首字母。由于这因字体而异，因此需要可下载的字体（网络字体，@font-face）。
“例如，“Ê”会发生什么？ - 我们想要的是一种简单的方法来告诉浏览器“获取当前文本的最高点并将其与对齐”，所以你的观点是误解了这个问题。不过，我非常感谢您的笔记，它们有助于理解问题的本质。