Tuesday, 11 March 2014

HTML: Padding underneath an IMG within a DIV

I had a simple bit of HTML with an image within a DIV. Yet despite setting padding and margin to 0, there would still be some padding displayed below the image.

<div>
    <img src="Logo.jpg" alt="Logo" />
</div>

The answer was to set

img { display:block; }
or

img { vertical-align:bottom; }


Since images are inline and text is inline, user agents leave some space for descender characters ( y, q, g ). To un-do this effect for images, you can specify either of the styles above, though you might want to make the rules more specific so you don't target an image you don't want this to apply on.

Another alternative as another poster has pointed out would be to set line-height to 0 on the parent element.

No comments:

Post a comment