A surprise question: what is the height of a div that contains just a 40 pixel tall image?
<div><img src="100x40.png" width="100" height="40"></div>
No. It is a little more than 40 pixels:
By default, the bottom of an image aligns with the baseline. Between the baseline and the bottom of line box there is space that contains (i) descenders (ii) half-leading. Have a look at this picture, which explains how the image aligns with the line box:
Notice that the bottom of line box extends two pixels below the baseline to accommodate the descenders (the gap will vary depending on font, font size and line height). And no, removing the text and white-space from the box will not eliminate the gap.
Solution
To eliminate this space, set align="absbottom" or style="vertical-align: bottom;" on the image. This will align the bottom of the image with the bottom of the line box and minimize its height as much as possible.
top alignment works too. Besides img, this technique also works on other inline-block elements such as iframe, object and embed.
