img 标签嵌套在标签中：第一个标签的尺寸问题

Question

我将一个 img 标签嵌套到一个 a 标签中。这是 html:

img {
  margin-bottom: 40px;
}

section a:nth-of-type(1) {
  background: green;
  height: 100px;
  width: 200px;
}

<section>
  <a href="https://www.adelaide.edu.au/" target="_blank">
    <img src="../image/soccerAndWorldCup.jpeg" alt="uniAdelaideLogo">
  </a>
  <a href="https://www.w3schools.com/html/" target="_blank">
          w3school
         </a>
</section>

图像似乎没有包含在第一个标签中。相反，它位于图像下方 the 1st a tag is below the image. However, its dimension is correctly set when I tried to inspect itthe dimension of the 1st a tag. The margin of the image is correctcorrect image margin.

谁能帮忙解释一下为什么？非常感谢。快速补充：这是因为锚标记是内联元素而 img 表现得像内联块元素吗？我尝试了 display: inline-block 为第一个 a 标签，图像被包装了。我的理解正确吗？

Answer 1

我猜这是一个白space问题。浏览器为标签之间 spaces/tabs 的每一行呈现一个 space。

试试这个：

<section><a href="https://www.adelaide.edu.au/" target="_blank"><img src="../image/soccerAndWorldCup.jpeg" alt="uniAdelaideLogo"></a><a href="https://www.w3schools.com/html/" target="_blank">w3school</a></section>

Answer 2

display: inline 忽略 width 和 height 属性； inline-block 没有。

因此，如果您将 a 保留为默认值 inline，则其宽度将完全由其内容（内部的 img）决定，其高度将是默认值一条线。由于整个盒子会比那个高，所以 a 会出现在 img 的底部（在 img 的边距内）。实际上，img 在 a 中，但溢出了它。

这能说明问题吗？

img 标签嵌套在标签中：第一个标签的尺寸问题

img tag nested in a tag: size problem for the 1st a tag

html

anchor

image