包装图像添加空间

Question

就像这个例子：http://jsfiddle.net/sbefc58t/2/

当我将图像包裹在链接中时，会在图像下方添加空间。我怎么摆脱这个？

<div class="top">
    <a href="/">
        <img src="http://static.giantbomb.com/uploads/screen_medium/11/118253/2220255-wolf3d_dos.png" />
    </a>
</div>  

*{padding:0;margin:0;}
.top{ background: grey; border-radius: 3px; margin: 5px 0; overflow: hidden; }
a{line-hight:0;}

Answer 1

JSFiddle - DEMO

使用vertical-align: middle;与img

img {
    vertical-align: middle;
}

Answer 2

只需在display: block中添加img：

img{display: block;}

fiddle