Sbarazzarsi dello spazio sotto l'immagine del blocco in linea

Question

Come si elimina lo spazio tra la parte inferiore dell'immagine e il wrapper, mantenendo l'immagine come blocco in linea? Perché sta succedendo?

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

Scrivi vertical-align:top;. Scrivi come questo:

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

Scegli questa http://jsfiddle.net/dJVxb/4/

Answer 2

che ha aggiunto lo spazio è lì per fare spazio a discendenti erano lì di testo in linea pure. I discensori sono parti di lettere che arrivano verso il basso, come in 'y' e 'g'.

Se è necessario mantenere una proprietà vertical-align di center o baseline, è possibile risolvere questo problema impostando il line-height-0.