代码之家 › 专栏 › 技术社区 › Keith

如何删除标签底部的这个空间?[副本]

css

Keith · 技术社区 · 7 年前

这个问题已经有了答案:

Image inside div has extra space below the image 9个答案

我有一个 <img> 在一个 <a> 底部有一个随机的额外空间:

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>

链接应该完全包装图像,但底部有一个空白区域,不应该存在:

我怎么摆脱这个空间?我不想设定 overflow: hidden 或者剪辑内容-图像的高度和宽度可以更改,我希望 <A & GT; 拉伸。

3 回复 | 直到 7 年前

Claire 7 年前

去过那里,加上 display:block 给你的 img

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

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

Nandita Sharma 7 年前

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

-1

Silu K 7 年前

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>

在这里,我刚在图像中添加了显示块。希望它对你有用。

推荐文章