html - 为什么更改 div 上的字体大小会更改其高度？

Question

我有一个大致如下所示的结构：

• div（有字体大小）
  • 跨度（也有字体大小，包含文本）

现在，我认为第二个 div 会紧紧围绕跨度。它们的高度仅取决于跨度的字体大小。但是，如果 div 有自己的字体大小，它似乎包含一些额外的空间，在 span 本身的顶部。

这是为什么？

.div {
  font-size: 25px;
  outline: 1px solid red;
}

.span {
  outline: 1px solid blue;
  font-size: 12px;
  /* The boxes are equal in size when this font-size is about 20px */
}

<div class="div"><span class="span">there!</span></div>

代码沙盒链接。

标签： htmlcss