Unwanted padding-bottom of a div

Question

Here is my html:

Answer 1

img { display:block; }

or

img { vertical-align:bottom; }

would work. Since images are inline and text is inline, user agents leave some space for descender characters ( y, q, g ). To un-do this effect for images, you can specify either of the styles above, though you might want to make the rules more specific so you don't target an image you don't want this to apply on.

Demo: http://jsbin.com/obuxu

Another alternative as another poster has pointed out would be to set line-height to 0 on the parent element.

Technical Explanation: https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps