Skiroid Skiroid - 1 year ago 108
HTML Question

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.


Answer Source

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

    vertical-align: top;

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download