This is because images by default are displayed inline (CSS display: inline
) or as text, to put it in English. The line-height
is currently taller than the image so it's producing a space beneath and above it. You can solve this problem by using display: block
on the image to kill the line height altogether or by using vertical-align: top
, also on the image, to force the image to align with the top of the text line that it's in (it'll still have invisible space beneath it). If you're wondering exactly how much space the line is consuming, set a span
element with a unique background color around the image.
For further reference, this is also related to the Mysterious Gaps Problem, detailed in this thread: http://www.codingforums.com/showthread.php?t=89614