Where's the extra space coming from in these images?

Question

I have a problem that I've replicated in various browsers.

I have divs with images each in a wrapper http://jsfiddle.net/QnVYL/. The wrapper has a 1px border and 5px padding. The image inside is sized to 100% width.

For some reason, though, there is more than 5px between the bottom of the image and the bottom of its wrapper. See how the padding does appear to be equal on all sides of the images? There seem to be 3 pixels added from... somewhere. Firebug doesn't let me know where from.

How can I get rid of the space? I can't use absolute positioning to fake the padding because I'm not yet sure I'll always know the exact height of the image.

Help is much appreciated!

Answer 1

It is a known issue. Try:

img {
    display: block;
}    

Answer 2

It's a line-height. Images are rendered as inline-block elements by default. The line-height makes sure that following text does not stick to the image like here:

<img...><br>foo

Both these fixes are useful, depending on the situation:

.imgContainer { line-height: 0; }

img { display: block; }