CODEWITHSUNDEEP
html
user1309158
user1309158

Reputation:

3px extra height on a div with an image inside it

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.

Upvotes: 7

Views: 2146

Answers (1)

James Montagne
James Montagne

Reputation: 78740

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.

Upvotes: 13

Related Questions