如何在父级而不是直接在元素上设置font-size会影响垂直对齐？

Question

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

在父元素上设置font-size的示例：https://jsfiddle.net/wL5zjLnf/1/

section { font-size: 75px; }

直接在span：https://jsfiddle.net/tmk2hqon/

上设置font-size的相同示例

span { font-size: 75px; }

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

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

• 文字（75px）
• 白色空间（第一个示例中为75px，第二个示例中为正常字体），使基线与基线对齐
• 红色块，将白色空间的中间与中间对齐

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

Answer 1

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

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