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

Answer 1

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.

Answer 2

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

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

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