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

line-height: 0; on the parent DIV fixes this for me. Presumably, this means the default line-height is not 0.