Why is there a gap between my image and its containing box?

Question

When my browser renders the following test case, there\'s a gap below the image. From my understanding of CSS, the bottom of the blue box should touch the bottom of the red

Answer 1

Because the image is inline it sits on the baseline. Try

vertical-align: bottom;

Alternately, in IE sometimes if you have whitespace around an image you get that. So if you remove all the whitespace between the div and img tags, that may resolve it.