html - インライン ブロック イメージの下のスペースを取り除く

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

</p>

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プロパティを保持する必要がある場合は、 を に設定することでこれを修正できます。centerbaselineline-height0