strange padding problem around image

Question

I'm having a strange problem. I want to put border around the image, but it is showing some space at the bottom. Please have a look here: http://jsfiddle.net/4WKJY/ I don't want to put fixed height and width. Thanks for any help.

Answer 1

Contrary to the other answer, it has nothing to do with whitespace in the markup, and removing the whitespace won't fix this.

The problem is that images are inline by default and the initial value for vertical alignment is baseline. This means that the image is treated as if it were any other textual component of the page, and space is reserved beneath textual content for descenders - the tails on letters like lowercase 'j' etc.

To fix this, you either need to tell the rendering engine that the image shouldn't be treated like textual content - .thumb img { display: block; } will do this - or you can tell the rendering engine not to reserve space for descenders, and instead align the content to the very bottom - .thumb img { vertical-align: bottom; } will do this.

Edit: I seem to recall that old versions of Internet Explorer incorrectly handle whitespace, so removing the whitespace may have an effect there, but what I said above still stands; removing the whitespace is not a cross-browser fix for this problem.

Answer 2

You can fix it by making the img display:block in your CSS, as seen here.