Question

<img>标记内的

<a>个标记已永远存在他们的边界为什么不排队？

让我们说页面上唯一的东西是

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

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

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

然而，a标签的y大约小于0（可能是图像中间的ISH的中间位置），高度可以使图像低于像素。

为什么这个蠢货就是那个？

它稍后会抛弃布局，让一切变得混乱。

Answer 1

默认情况下，图像的底部位于Store.data元素的文本基线处。基线下方的额外空间用于下行（下方延伸的字形部分，例如字母p和q。）

您可以使用＆＃34; vertical-align：bottom＆＃34;来对齐元素底部的图像。或＆＃34; text-bottom＆＃34;在图像上：

＆＃13;

Person

＆＃13;

<a>

＆＃13;

（规则不是同义词：a {border: 1px solid #00F} img#two {vertical-align: bottom} img#three {vertical-align: text-bottom}将元素＆＃34;定位在父元素的字体＆＃34;和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>＆＃34;的底部。在元素的底部＆＃34;。基于这里的问题＆＃34;底部＆＃34;可能是技术上正确的，但如下面的评论中所述，对于至少一些用户/浏览器，它可以与边界重叠。 ..）

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>

为什么A HREF标记中的IMG标记没有对齐的边框

2 个答案: