Why does img click on the text content next to it?

Question

I have this bit of code:

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

When you enable this img tag, the text "view" will be pressed down. Even if I try to give the p-tag a line height equal to the height of img, it still looks balanced.

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

Answer 1

 img { vertical-align: bottom; }​ 

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