Demo: Fixing Gaps Below Images with CSS
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
without the fix: narrow gap below image
attemped fix with vertical-align:bottom on whole div
attemped fix with line-height:0; Works in FF with truncation. No go in IE
display:block works if the image is alone in the block, like the mini-example on the right
attemped fix with display:block on image; text drops below image
with a negative margin fix. Works, but slight loss of image at bottom
ALMOST FIXED: vertical-align:bottom applied to image. breaks in IE6/7 and Opera.
The Winner:
vertical-align:bottom;
on both image and text
FIXED: with vertical-align: bottom on image and separately on text