Question

I’m working on a new site but there is a small design thing which I just can’t get my head around.

Basically, I’m creating a site which users are able to upload funny pictures to. Although the area where the picture is displayed there is a 3px gap underneath. Here’s a link to a screenshot of what I mean, dead link.

I’ve tried a ton of things but nothing seems to work. If anyone can suggest any solution, please do.

Thanks.

Answer 1

It’s due to the default vertical-align value of images. They are baseline. Change to top or bottom and it will go away.

img{
    vertical-align: top;
}

The extra space is the area below the baseline which is for letters that hang below like y or g.