Satır içi blok görüntüsünün altındaki boşluktan kurtulun

Question

Görüntüyü satır içi blok olarak tutarken, resmin alt kısmı ile sarıcı arasındaki boşluğu nasıl silebilirim? Bu neden oluyor?

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

Yazma vertical-align:top;. Böyle yaz:

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

Kontrol alanı eklendi bu http://jsfiddle.net/dJVxb/4/

Answer 2

kuyruklu yer var yanı satır içi metin vardı yapmak için vardır. Descenders, 'y' ve 'g' gibi aşağıya inen harflerin parçalarıdır. Eğer center veya baseline bir vertical-align özelliğini korumak gerekiyorsa

, sen senin line-height0 için ayarlayarak bu sorunu giderebilirsiniz.