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!
Best Answer
By default, an image is rendered inline, like a letter so it sits on the same line that a, b, c and d sit on.
There is space below that line for the descenders you find on letters like g, j, p and q.
You can:
vertical-align
of the image to position it elsewhere (e.g. themiddle
) ordisplay
so it isn't inline.The included image is public domain and sourced from Wikimedia Commons