Why does my image have space underneath?

Images gain a mysterious empty space underneath, even if padding:0;margin:0 are applied.

Demonstration

The red border should hug the image, but there is space on the bottom side.

What causes this, and how can I remove this space?

Solution 1:

Images (and inline-block elements in general) are treated like a character.

As such, they obey the rule of the baseline.

In normal text, the baseline is the line across the bottom of most letters, such as in this sentence.

But some letters, such as p, q, j and so on, have tails that drop below the baseline. In order to prevent these tails from colliding with letters on the next line, space is reserved between the baseline and the bottom line.

This diagram illustrates the different lines used by text:

(Image from WHATWG)

So, the image is aligned to the baseline, even if there is no text. Fortunately, the fix is very simple:

img {vertical-align:bottom}

This will align the image to the bottom of the line, also removing the mystery space.

Just be careful, if your image is small (smaller than the line height), you may start seeing mystery space appearing above the image instead. To fix this, add line-height:1px to the container element.

Hopefully this helps the many people I've seen ask about this and similar problems!

Solution 2:

Changing img to a block level element

img {
  display: block;
}

will also remove the space below the image.