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

正如您所看到的那样,当线条高度与图像顶部对齐时,文本本身不是.我已经尝试了所有垂直对齐选项,没有修复.

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

Answer 1

这一般与排版有关,而不是CSS.有许多垂直指南可以考虑字体设计.我假设您希望上限高度与图像顶部相匹配.

我在这里将你的例子添加到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解决方案.硬编码该值仅适用于一种字体,甚至可能因浏览器而异.