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

我有一个非常烦人的问题，我想将图像的顶部与文本对齐，但字母实际上略低于行高。CSS line-height属性大于font-size属性

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

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

正如你所看到的，而线高度与顶部对齐的形象，文字本身不是。我尝试了所有垂直对齐选项，但没有修复。

为什么行高度大于字体大小，即使它们都设置为相等的尺寸？这怎么解决？

来源

2012-09-13 DominicM

这与排版一般比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解决方案。对值进行硬编码仅适用于一种字体，甚至可能因浏览器而异。

来源

2012-09-13 20:42:59 zim2411

这是一个真正的耻辱，看起来像一个非常简单和常见的要求，我想这就是为什么我们仍然有闪光灯:)负边距值将工作我猜想，但是当你放大时会发生什么？将不得不尝试什么是最好的解决方案，也许使用负面的EM将起作用。 – DominicM

选择通用字体将有所帮助，并且SVG字体呈现可以提供更多控制，但这限制了跨浏览器的兼容性。改为改变设计可能是最容易的。 – zim2411

无法真正改变设计，但它不一定非常完美，因此负边距方法应该可以正常工作。 – DominicM

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

回答

相关问题