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

Question

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

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

section { font-size: 75px; }

同样的例子，字体大小直接设置在跨度上:https://jsfiddle.net/tmk2hqon/

span { font-size: 75px; }

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

在我看来，元素之间的一些空白会扰乱文本和 block 之间的对齐，就好像存在三个元素一样:

• 文字(75px)
• 一个空白(第一个示例中为 75px，第二个示例中为正常字体大小)，它使基线与文本的基线对齐
• 一个红色 block ，它的中​​间与空白的中间对齐

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

Answer 1

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

设置 span 的字体大小时，父级的行高保持不变，因此 div(显然)处于基线水平，同时它仍处于父级行高的中间。