How do I prevent a link tag from adding extra padding below an image?

Question

I have image wrapped in a link. The link adds extra padding in the bottom (Please see the red area in the attached image). How can I remove it? I have tried to set the padding: 0; and margin:0 and also I have tried display:inline-block , but it does not solve it.

HTML:

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

CSS:

 a{
    background: red;
    padding: 0;
}

JS Fiddle: http://jsfiddle.net/D6Ak8/

Answer 1

Use display: block; for the img tag:

a img {
    display: block;
}

Updated Fiddle: http://jsfiddle.net/D6Ak8/1/

Answer 2

显示块是您的解决方案JS提琴

Answer 3

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

Add vertical-align:bottom to your image. This way you will keep your inline display.

Answer 4

try

img{border:none;}

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