Strange picture filling problem

Question

I have a strange problem. I want to put a border around the image, but it shows some space below. Please see here: http://jsfiddle.net/4WKJY/ I do not want to set a fixed height and width. Thanks for any help.

Answer 1

You can fix this by making img display:block in your CSS, as shown here .

Answer 2

Unlike the other answer, this has nothing to do with the markup space, and removing spaces will not fix it.

The problem is that the images are embedded by default, and the initial value for the vertical alignment is baseline . This means that the image is processed as if it were any other text component of the page, and the space is reserved under the text content for descenders - tails in letters, for example, lowercase "j", etc.

To fix this, you need to either tell the rendering engine that the image should not be processed as text content - .thumb img { display: block; } .thumb img { display: block; } will do this - or you can say that the rendering engine does not reserve space for descenders, but instead .thumb img { vertical-align: bottom; } content to the very bottom - .thumb img { vertical-align: bottom; } .thumb img { vertical-align: bottom; } will do it.

Edit: It seems to me that older versions of Internet Explorer do not handle spaces correctly, so removing spaces can have an effect, but what I said above is still worth it; removing spaces is not a cross browser for this problem.

Answer 3

Alternatively, apply css only to images:

 .thumb img{ position: relative; padding:2px; float: left; margin: 0px 0px 5px 5px; border: solid 1px #ccc; }