Why have my images got extra spacing?

Answer 1

Probably padding related, maybe it is the div containing the image? Could probably help if you posted a link, if possible.

Answer 2

It'll likely be the vertical alignment - check the computed style to see what it currently is for the images, then try adding this to your stylesheet:

img { vertical-align: text-bottom; }

See That mysterious gap under images and What is Vertical Align for some examples of what's happening.

Answer 3

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;
}

Answer 4

Using vertical-align bottom is one solution that works.

Since you don't appear to be using images inline with text though, the approach I'd take is to make the images block-level elements:

img {
    display: block;
}