html - Why have my images got extra spacing?

Question

Can anyone tell me what is causing the space below the images? There seems to be extra padding in the divs with the red border relating to the images. I cant find this spacing in firebug at all.

Baffled.

alt text http://antony.co.za/so.jpg

Answer 1

By default, images align their bottom edges with the baseline of the text. That space you're seeing is the space below the baseline, used by decenders like q, p, y, etc. (The fact that you have no text is irrelevant - space for them is still reserved.)

You can get rid of it like this:

img {  /* Or a suitable class, etc. */
    vertical-align: bottom;
}