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