Get rid of space underneath inline-block image [duplicate]

Question

How do I get rid of the space between the bottom of the image and the wrapper, while keeping the image as inline-block? Why is this happening?

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

Write vertical-align:top;. Write like this:

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

Check this http://jsfiddle.net/dJVxb/4/

Answer 2

That added space is there to make room for descenders were there inline text as well. Descenders are parts of letters that reach down, like in 'y' and 'g'.

If you need to retain a vertical-align property of center or baseline, you can fix this by setting your line-height to 0.