Избавиться от пространства под встроенным блочным изображением

Как мне избавиться от пространства между нижней частью изображения и оберткой, сохраняя изображение как встроенный блок? Почему это происходит?

http://jsfiddle.net/dJVxb/2/

HTML:

<div id="wrapper">
<img src="https://twimg0-a.akamaihd.net/profile_images/1735360254/icon_reasonably_small.jpg" >                 
</div>

CSS:

#wrapper {
    background:green;
}
img {
    display:inline-block; 
    margin:0;
}

Ответ 1

Напишите vertical-align:top;. Напишите вот так:

img {
    display:inline-block; 
    margin:0;
    vertical-align:top;
}

Отметьте http://jsfiddle.net/dJVxb/4/

Ответ 2

Это добавленное пространство, чтобы освободить место для descenders, был встроенный текст. Descenders - это части букв, которые достигают вниз, как в "y" и "g".

Если вам нужно сохранить свойство vertical-align center или baseline, вы можете исправить это, установив line-height на 0.