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?