Where is the extra space from these images?

Question

I have a problem that I am replicating in different browsers.

I have divs with images each in a wrapper http://jsfiddle.net/QnVYL/ . The wrapper has a border of 1px and an addition of 5px. Image inside up to 100%.

For some reason, however, there are more than 5 pixels between the bottom of the image and the bottom of its wrapper. See how the padding looks equal on all sides of the images? There seem to be 3 pixels from ... somewhere. Firebug doesn't let me know where it came from.

How can I get rid of space? I can’t use absolute positioning to fake it because I’m still not sure that I will always know the exact height of the image.

Help is much appreciated!

Answer 1

This is a known issue. Try:

img {
    display: block;
}    

Answer 2

This is the line-height. Images are displayed as inline elements by default. Line height ensures that the following text will not be attached to the image, as here:

<img...><br>foo

Both of these fixes are useful depending on the situation:

.imgContainer { line-height: 0; }

img { display: block; }

Answer 3

There is no extra interval if you add img {display:block}

http://jsfiddle.net/lexy0202/uxMu9/2

Answer 4

As I already guessed, this is a display attribute:

#container {
    display:block;
    width: 50%;
    margin: auto;
    margin-top: 100px;
}