如何删除<a> 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:

底部的空格

如何摆脱这个空间？我不想设置overflow: hidden或以其他方式剪辑内容 - 图像的高度和宽度可能会发生变化，我希望<a>能够伸展。

Answer 1

在锚点

上设置font-size: 0;

此外，如果你必须在锚中显示一些文本，然后将其包装在一个范围内并在该范围上添加字体大小。

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>

Answer 2

去过那里，将display:block添加到您的img

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

小提琴：https://jsfiddle.net/hfpwn2a6/

Answer 3

＆＃13;

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

这里我刚刚添加了显示块到图像。希望它适合你。