How can I prevent a link tag from adding extra padding under an image?

advertisements

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/


Use display: block; for the img tag:

a img {
    display: block;
}

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