Dealing with a frustrating issue where I want to align the top of an image with text, but the letters end up slightly below the line height.
Check out this simple example featuring a classic movie:
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):
Although the line height is aligned with the top of the image, the text itself isn't. I've tried all vertical-align options without success.
Why does the line height appear larger than the font size when they are both set to equal dimensions? How can this be resolved?