在父元素上而不是直接在元素上设置字体大小如何影响垂直对齐？

Question

我设置了一个简单的标记来尝试了解垂直对齐的工作原理，但字体大小如何影响对齐让我感到困惑。

在父元素上设置字体大小的示例：https://jsfiddle.net/wL5zjLnf/1/

section { font-size: 75px; }

直接在 span 上设置字体大小的相同示例：https://jsfiddle.net/tmk2hqon/

span { font-size: 75px; }

在第一个示例中，红色块的中间似乎与文本最后一行中间对齐，而在第二个示例中，红色块中间似乎与基线对齐。

在我看来，元素之间的一些空白扰乱了文本和块之间的对齐，好像有三个元素：

• 文字（75px）
• 空白（第一个示例中为 75 像素，第二个示例中为正常字体大小），将基线与文本的基线对齐
• 一个红色块，将其中间对齐到空白区域的中间

这是预期的行为，还是我误解了它的工作原理？我会假设两个示例都会给出相同的结果，结果将是红色块中间与最后一行文本的底部对齐。

Answer 1

通过设置父级的字体大小，你也隐式地设置了它的行高，因此，div 将在中间。

在设置 span 的字体大小时，父级的行高保持不变，因此 div （显然）处于基线级别，而它仍处于父级行高的中间。