Bottom margin or spacing in an inline img

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.