THINK

that’s how i naturally know

Archive for the ‘html’ tag

Bottom margin or spacing in an inline img

one comment

Inline img tags by default is positioned such that it has an additional bottom spacing relative to its parent block element. If the parent block element e.g. div have zero padding and the img have zero margin, the img height will not equal to the div height as the additional spacing will push the parent border further downwards.

This is because the inline img tries to compensates for character decendants when positioned inline with adjacent text. charater decendants are the “tails” in “g”, “j”, “p”, “q” and “y” that extend downwards.

To remove the spacing, set the img vertical-align to bottom. In the absence of adjacent text, this would make img ignore the compensation, resulting in equal-height div and img.

Written by Jake

October 22nd, 2011 at 3:09 pm

Posted in Web

Tagged with ,