如何防止链接标记在图像下方添加额外填充？

Question

我将图片包裹在一个链接中。该链接在底部添加额外的填充（请参阅附加图像中的红色区域）。 我该如何删除它？我试图设置padding: 0;和margin:0，我也试过display:inline-block，但它没有解决它。

HTML：

<a href="#"><img src="http://i50.tinypic.com/2poy3kl.jpg" /></a>​

CSS：

 a{
    background: red;
    padding: 0;
}

JS小提琴： http://jsfiddle.net/D6Ak8/

Answer 1

对display: block;代码使用img：

a img {
    display: block;
}

更新了小提琴：http://jsfiddle.net/D6Ak8/1/

Answer 2

显示块是您的解决方案 js fiddle

Answer 3

http://jsfiddle.net/D6Ak8/4/

将vertical-align:bottom添加到您的图片中。这样您就可以保持内联显示。

Answer 4

试

img{border:none;}

...............