锚点标签底部出现空白间隙

Question

我有一个包围图片的<img>标签。我在包含<img>标签的<div>标签上设置了边框。我已经将内外边距都设置为0，但出现了问题：<img>标签的高度仍比图片高3像素左右。这留下了一些空间在图片和边框之间，破坏了我想要达到的效果。

我做错了什么？我在FireFox和Chrome中进行了测试，结果相同。

谢谢

- Icode4food

Answer 1

这张图片的 CSS 样式是 display: inline，因此它被视为一个字符并且位于基线上。留白是由字符的下行部分（例如 j、g、y 和 p）所占用的空间导致的。

你可以使用 CSS 的 vertical-align 属性来调整文字和图片之间的垂直对齐方式：img{vertical-align: bottom}

- Quentin

---

更具体地说，img{vertical-align: bottom}的意思是将图片与文字底部对齐。 - Álvaro González

这正是发生的事情。如果我执行 vertical-align:bottom; 或者 display:block;，问题就解决了。哪个方案更好？ - Icode4food

两者并没有谁更好，它们只有不同的含义。块元素会在其周围产生换行和其他有趣的副作用。 - Quentin

关键是将垂直对齐设置为底部。虽然这个问题已经问了9年，但我仍然很好奇为什么垂直对齐会影响高度。 - cytsunny

Answer 2

display:block 如果元素没有兄弟节点，则足以满足需求。

- meder omuraliev

---

有趣，所以真正的罪魁祸首是图像标签，而不是<a>标签。 - Icode4food

这大概就是David说的，任何内联元素都会有下行字符的空间，这是自然的行为。 - meder omuraliev

"vertical-align:bottom" 和 "display:block" 都可以移除底部的“额外空白”。 - aztack

Answer 3

我也遇到了同样的问题，通过在“a”标签中添加display: block;和font-size: 0px;来解决它。

- christk

Answer 4

我通过添加以下内容来解决我的问题：

a {
 display:inherit
}

希望这能帮助到您。

- Marc Ordinario

Answer 5

2021年12月解决方案

正如多位人士宣布的那样，CSS :has()选择器已经实现。因此，可以通过该选择器解决直接子元素为图像的锚点问题：

a:has(> img) {
  font-size: 0;
}

此时此刻，我正在撰写这篇回复，它仅受 Safari TP 支持，但很可能this table很快就会得到更好的支持。

- Lionel T