display:block; /* removes extra space */
This is no secret, but it stumped me for a long time when I was first getting started with CSS, and I see it catch beginners all the time.
When styling an image with an element right below it, you often get an extra space hanging out in between the element and the picture.
No amount of zeroing margins and padding will remove it. But adding
display:block; to your image will! Images are
inline-block by default, so that extra space is actually the browser leaving room for text descenders.
With the fix applied:
See it in action in this fiddle: http://jsfiddle.net/BxTzK/