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

font-size:0; on the parent DIV is another tricky way to fix it.