Why is there a pesky little space between

Answer 1

The img is a "replaced element" in HTML, and as such, is it treated as a character. Now in the absence of any styles, the image is aligned with the baseline of the other characters on the line.

So in other words, there is room for the descender underneath the image.

Changing it to a block removes this feature, as you noticed.

Answer 2

Images by default are aligned with the base line of the text. So if you would put text next to the image, the image would align with the base of an x, but there is a little space (3px apparently) between that base line and the bottom of the line of text.

There you have it:

http://jsfiddle.net/xDCEX/

And you can solve it using vertical-align: bottom if you dont want to make the image a block. That way, the image is still part of the text, but instead of the baseline, it is now aligned to the bottom of the bounding box of the text.

http://jsfiddle.net/xDCEX/1/

Of course, changing it to a display: block also works, but it has other side effect. If everything is working now, changing vertical-align is the easy way.