Why does an img push down the text content next to it?

Question

I have this bit of code:

<p><img src="img/icon.png" />View</p>

With the inclusion of that img tag, the text "view" is pushed down. Even if i try to give the p tag a line-height equal to the img height, it still looks off balance.

What am I missing? jsfiddle example: http://jsfiddle.net/bLUL6/

Answer 1

img {
    vertical-align: bottom;
}
​

This blog has a detailed explanation of how vertical-align works with inline images.