摆脱内联块图像下方的空间

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

增加空间是为了为下行器腾出空间，还有内联文本。下降部分是向下伸展的字母的一部分，如“y”和“g”。

如果您需要保留vertical-align或center的{​​{1}}属性，可以通过将baseline设置为line-height来解决此问题。