Избавьтесь от пространства под встроенным блоком image

Question

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

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; 
} 

Answer 1

Написать номер vertical-align:top;. Написать так:

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

Проверить это http://jsfiddle.net/dJVxb/4/

Answer 2

что добавили пространство там, чтобы освободить место для подстрочных были там встроенный текст, а также. Descenders - это части букв, которые тянутся вниз, как в «y» и «g».

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