html - CSS 行高属性大于字体大小属性

Question

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

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

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 中):

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

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

Answer 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; with font-family: "Trebuchet MS" 和 font-size:48px。 ( http://jsfiddle.net/ahXpH/4/ ) 但是，如果您删除“Trebuchet MS”并使用 Arial 的后备前端，您会发现它不再排成一行，现在是图像上方的一个像素。

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