CODEWITHSUNDEEP
htmlcsslayout
Antony Carthy
Antony Carthy

Reputation: 5597

Why have my images got extra spacing?

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

Upvotes: 1

Views: 1157

Answers (4)

Jonny Buchanan
Jonny Buchanan

Reputation: 62793

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.

Upvotes: 5

Sam DeFabbia-Kane
Sam DeFabbia-Kane

Reputation: 2609

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

Upvotes: 0

RichieHindle
RichieHindle

Reputation: 281405

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

Upvotes: 9

tomzx
tomzx

Reputation: 2033

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

Upvotes: 0

Related Questions