[英]White space at bottom of anchor tag
I have an tag surrounding an image.我有一个围绕图像的标签。 I have a border set on the div that the tag is in. I have both margin and padding set to 0 but for some reason my tag is still about 3 pixels taller than my image.
我在标签所在的 div 上设置了一个边框。我将边距和填充都设置为 0,但由于某种原因,我的标签仍然比我的图像高约 3 个像素。 This leaves a bit of space between the image and the border, which destroys the look that I want to accomplish.
这会在图像和边框之间留下一点空间,这破坏了我想要完成的外观。
What am I doing wrong?我究竟做错了什么? I have tested in both FireFox and Chrome with the same results.
我已经在 FireFox 和 Chrome 中进行了测试,结果相同。 Thanks
谢谢
The image is display: inline
so it is treated like a character and sits on the baseline.图像是
display: inline
因此它被视为字符并位于基线上。 The gap is caused by the space provided for the descender (which you find on letters like j, g, y and p).间隙是由为下降部分提供的空间造成的(您可以在 j、g、y 和 p 等字母上找到)。
Adjust the vertical-align
with CSS: img{vertical-align: bottom}
使用 CSS 调整
vertical-align
: img{vertical-align: bottom}
如果元素没有兄弟元素, display:block
就足够了。
I had the same issue and i fixed it by adding to the 'a' tag display: block;
我遇到了同样的问题,我通过添加到“a”标签来修复它
display: block;
and font-size: 0px;
和
font-size: 0px;
I fixed mine by adding我通过添加修复了我的
a {
display:inherit
}
Hope this helps希望这可以帮助
As announced by several people, css :has()
selector was implemented.正如几个人所宣布的,css
:has()
选择器已实现。 So this issue could be solved for anchors which "has" images as a direct child:因此,对于“具有”图像作为直接子级的锚点,可以解决此问题:
a:has(> img) {
font-size: 0;
}
At the moment I am writing this reply, it is only supported by Safari TP but probably this table will be greener soon.目前我正在写这个回复,它只受 Safari TP 支持,但这张表可能很快就会变得更环保。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.