CSS line-height property larger than font-size property

Question

I am having a very annoying issue where I want to align the top of an image with text but the letters are actually slightly below the line height.

I created simple sample with a classic movie to illustrate the issue below.

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;
}

Output (in Chrome):

As you can see while the line height is aligned with the top of the image, the text itself isn't. I have tried all vertical-align options with no fix.

Why is line height larger than font size even when they are both set to equal dimensions? How can this be fixed?

Answer 1

This has more to do with typography in general than CSS. There are a number of vertical guides that factor into font design. I assume you want the cap height to match the top of the image.

I added your example to jsfiddle here: http://jsfiddle.net/ahXpH/1/ and replicated it. If you zoom in, you can see that the "i" in "Big" is actually taller than the B, while the "g" extends beyond the confines of the paragraph itself. Inspecting the element in Chrome reveals that the line-height and font-size match.

To get around this, you'll have to adjust the margin-top and visually line it up. For my jsfiddle version, this happens to be margin-top: -8px; with font-family: "Trebuchet MS" and font-size:48px. ( http://jsfiddle.net/ahXpH/4/ ) However, if you remove "Trebuchet MS" and use your fallback front of Arial, you'll see that it no longer lines up and is a pixel above the image now.

Ultimately, I'm not sure if there is a pure CSS solution to this. Hardcoding the value will only work with one font, and may even differ from browser to browser.