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

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中）：

正如您所看到的，当线条高度与图像顶部对齐时，文本本身不是。我已经尝试了所有vertical-align选项而没有修复。

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

Answer 1

这一般与排版有关，而不是CSS。有许多垂直指南可以考虑字体设计。我假设你希望cap height匹配图像的顶部。

我在jsfiddle中添加了你的例子：http://jsfiddle.net/ahXpH/1/并复制了它。如果你放大，你可以看到“大”中的“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解决方案。对该值进行硬编码只能使用一种字体，甚至可能因浏览器而异。