Browsers make room for the "descenders" of the text by leaving a little space below images inside divs, as shown in yellow below. The space is left even if there ISN'T any text in the div! This can cause unexpected problems with layouts.
Most obvious attempts to solve don't work, like setting vertical-align on the div to bottom, or forcing the div height to exactly the image height, or setting line-height to 0
Some people suggest using display:block; This has the undesired side effect of making any accompanying text drop below the image, as shown in tan. However the orange inset example shows that it works fine if the image is the only thing in the div.
My preferred fix until I learned about the final option below was to put a -5px bottom margin on the div, as shown in red. Works well, although you lose a bit of the bottom of the image, and it could degrade if the font size were too large (can fix that with em-based measurements, but then the effect on the overall layout becomes difficult to predict).
The pink shows a solution I read about here http://gtwebdev.com/workshop/gaps/image-gap.php in "Example 3". That looked like a winner, until I realized that it caused the accompanying text to suddenly pop to the top of the div in IE6, IE7, and Opera.
Finally, I landed on what I think is the best solution, shown in green. It applied the vertical-align:bottom to BOTH the image and a span around the accompanying text