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

Remove the line break before the tag, so that it directly follows the tag with no blanks between it.

I don't know why, but for the Internet Explorer, this works.