How do I remove this space at the bottom of an tag?

Question

I have an <img> in an <a> and there is a random additional space at the bottom:

a { 
    text-decoration: none;
    color: inherit;
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    border: 1px solid red; 
}

img {  
    margin: 0;
    padding: 0;
}

<span><a target="_blank" href="#test"><img border="0" referrerpolicy="origin" src="http://via.placeholder.com/300/E8117F/ffffff" height="300" width="300"></a></span>

The link should exactly wrap the image, but there is a white space at the bottom that shouldn't be there:

How do I get rid of this space? I don't want to set overflow: hidden or otherwise clip the content - the height and width of the image can change and I want the <a> to stretch.

display: block; or vertical-align: bottom for the img element — VXp, May 22 '18 at 09:14
@VXp `display: block` just makes the `` stretch the width, the space is still there at the bottom. — Keith, May 22 '18 at 09:16
@Duannx probably - that answer didn't come up when I was searching — Keith, May 22 '18 at 09:17
@VXp cheers for the edit, that makes it clearer, if you had put that in an answer you could have had the rep for it. — Keith, May 22 '18 at 09:24

score 2 · Answer 1 · answered May 22 '18 at 09:19

Set font-size: 0; on anchor

Additionally, in case you have to show some text in anchor as well then wrap it in a span and add font size on that span.

a { 
    text-decoration: none;
    color: inherit;
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    border: 1px solid red; 
   font-size: 0;
}

img {  
    margin: 0;
    padding: 0;
}

<span><a target="_blank" href="#test"><img border="0" referrerpolicy="origin" src="http://via.placeholder.com/300/E8117F/ffffff" height="300" width="300"></a></span>

score 1 · Accepted Answer · answered May 22 '18 at 09:15

1

Been there, add display:block to your img

img {  
    margin: 0;
    padding: 0;
    display:block;
}

Fiddle: https://jsfiddle.net/hfpwn2a6/

answered May 22 '18 at 09:15

Claire

3,146
6
22
37

score -1 · Answer 3 · answered May 22 '18 at 09:23

a { 
    text-decoration: none;
    color: inherit;
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 0;
    border: 1px solid red; 
}

img {  
    margin: 0;
    padding: 0; display:block
}

<span><a target="_blank" href="#test"><img border="0" referrerpolicy="origin" src="http://via.placeholder.com/300/E8117F/ffffff" height="300" width="300"></a></span>

Here I have just added display block to image. Hope it works for you.

How do I remove this space at the bottom of an tag?

3 Answers3