为什么周围的a标签比里面的span小？

Question

我有一个

<a>

标签围绕着

<span>

标签，如下例所示：

a {
  font-size: 18px;
  line-height: 100%;
  display: block;
  width: 100%;
}

span {
  font-size: 18px;
  line-height: 100%;
}

<a href="/">
  <span>Hello World!</span>
</a>

虽然两者具有相同的字体大小和行高，但在检查两个标签时，a-标签只有 18px 高，而 span 的高度为 20px。

我不明白为什么里面的

<span>

比周围的

<a>

高？原因是什么？

Answer 1

a {
  font-size: 18px;
  line-height: 100%;
  display: block;
  width: 100%;
}

span {
  font-size: 18px;
  line-height: 100%;
  display: block;
}

<a href="/">
<span>Hello World!</span>
</a>

这是元素在内联与块中显示方式的差异。如果您运行上面的代码片段，您将看到它们现在匹配。这是 CSS 的一个微妙的部分，没有很好的文档记录。您可能看到的是大多数浏览器为内容内的下行元素的内联元素添加的额外空间。 （j、p、q、y 等）。

例如，Chrome 使用 LayoutNG 作为文本布局引擎。如果您仔细查看，您可以看到文本布局所需的一些自由（特别是对于内联元素）。