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


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.


<a href="#"><img src="" /></a>‚Äč


    background: red;
    padding: 0;

JS Fiddle:

Use display: block; for the img tag:

a img {
    display: block;

Updated Fiddle: