为什么A标签内部的IMG标签没有边框对齐

Question

<a>标签内的<img>标签一直存在。
为什么它们的边框不能对齐？

假设页面上只有这一个元素：

<a href='#'><img src='images/x.png' border='0'></a>

当我在Firefox调试器中查看时，它们的宽度都相同（即图像的宽度）。

但是，图像位于y = 0，h = img的高度处。

然而，a标签的y值在0以下（也许在图像的中间位置下方？），高度使其低于图像几个像素。

为什么会这样？这样会导致后面的布局混乱并使一切变得困惑。

- Stephen Hazel

---

由于图片是内联的，这会将图像放置在文本的基线上，而基线不包括行高。 - ndugger

也许有些人会认为副本不好，但你会发现一个非常详细的答案来理解这个空间。https://dev59.com/EG025IYBdhLWcg3wyJCV#34952703 - Temani Afif

是的，那看起来是一个完美的重复（而且你链接的答案思路很好）。干得好。 - Daniel Beck

为了辩护，我确实查过历史记录，但是它有点被埋没了。谢谢你指出来。 - Stephen Hazel

Answer 1

默认情况下，图像底部的位置与<a>元素的文本基线对齐。在基线之下的额外空间是为了下降字母（例如字母p和q中延伸出来的部分）而预留的。

您可以通过在图像上使用"vertical-align:bottom"或"text-bottom"将图像与元素底部对齐。

a {border: 1px solid #00F}

img#two {vertical-align: bottom}

img#three {vertical-align: text-bottom}

Image at baseline:
<a href='#'><img src='http://placehold.it/50x50'></a>

Image at bottom:
<a href='#'><img id="two" src='http://placehold.it/50x50'></a>

Image at text-bottom:
<a href='#'><img id="three" src='http://placehold.it/50x50'></a>

规则并不同义：text-bottom 将元素定位于“父元素字体底部”，而bottom将其定位于“元素底部”。根据这里的问题，“bottom”可能是技术上正确的选择，但正如下面的评论所指出的那样，对于至少一些用户/浏览器，它可能会重叠边框。

- Daniel Beck

---

我从“bottom”或“text-bottom”获得了相同的结果。但是我仍然将其添加到答案中，作为一个有效的选项... - Daniel Beck

据我所知（至少在Safari和Chrome中），边框都在图像外面（也许有浏览器特定的差异？）。 - Daniel Beck

奇怪，这就是我看到的：https://imgur.com/a/FRXD0。如果您查看文档，您会发现两者之间存在差异：https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align。 - Temani Afif

啊，可能是不同的字体。你说得对，这两个规则并不相同，text-bottom 将其放置“在父元素字体的底部”，而 bottom 则是“在元素底部”。根据这里的问题，“bottom”可能是需要的。(虽然我很惊讶它会与边框重叠，但这似乎不应该是正确的。) - Daniel Beck

看到这个情况至少有比我一个人更加困惑，真的太好了。感谢所有帮助过我的人，在这里向你们表示感谢。非常抱歉标记我的问题为重复，尽管您提供了令人惊叹的答案:( - Stephen Hazel

Answer 2

这个问题与<a>和<img>的默认呈现方式有关。锚链接（默认情况下）是inline元素，而图像是inline-block元素。

解决任何换行/间距问题的最简单方法是调整显示样式。将您的<a>设置为inline-block，并将子<img>设置为block。考虑以下示例，说明了当这些元素结合在一起时的“默认”呈现方式，以及当您更改它们的默认CSS时的呈现方式。

a {
  border: 1px solid black;
}

img {
  border: 1px solid red;  
}

.correct-display {
  display: inline-block;
  margin-top: 20px; /* Push the 2nd example down so the <a> border is visible on the 1st example */
}

.correct-display img {
  display: block;
}

<a href="#null">
  <img src="http://placehold.it/300x150" />
</a>

<a href="#null" class="correct-display">
  <img src="http://placehold.it/300x150" />
</a>

- Robert

---

我不认为“问题”这个词是合适的，因为这并不是一个问题。 - Temani Afif

我不太赞同你的inline-block/block解决方案...虽然它有效，但它会改变元素的性质，我觉得更好的方法是解释一下垂直对齐方式以及我们如何改变它。 - Temani Afif

我认为这至少是一个非常实用的解决方案，可以让HTML表现出你“通常想要的”方式。谢谢！ - Stephen Hazel

@StephenHazel HTML/CSS并不是按照你想要的方式运作的 :) 它有一些规则，你只需要理解它们。理解这些规则比寻找避开它们的解决方法更好 ;) - Temani Afif

@TemaniAfif 是的，有规则！太多规则了！理解它们是好的，但我已经做了5年的Web开发和20年的后端开发，仍然不明白所有规则:( 我不确定是否有人真正理解它们... - Stephen Hazel

将元素的性质更改是错误的这一暗示让我感到不舒服。我们经常以这种方式使用CSS。考虑float或更改元素以支持flex，或折叠列表元素，使项目水平显示而不是以符号/数字格式显示。 - Robert