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/