如果两个同级内联元素被标记为垂直对齐，作为基线的字体是什么？

问题描述

据我所知，vertical-align 将 inline-block 元素与文本字体的基线对齐。当 inline-block 元素有一个文本同级元素时，这是有道理的，这样我们就知道用作基线的字体大小是多少。

但是如果兄弟元素不是文本，而是另一个inline-block 元素怎么办？取基线的文本字体是什么？

例如：

<div style="padding: 8px 16px; background-color: green">
    <div style="display:inline-block;font-size:18px;vertical-align:text-top">Hello</div>

    <div style="display:inline-block;font-size:72px;vertical-align:text-top">Help</div>
</div>

输出为：

这里到底发生了什么？基线是什么？

解决方法

来自the specification：

以下值仅对父行内元素有意义，或父块容器元素的支柱。

和

在内容由行内级元素组成的块容器元素上，'line-height' 指定元素内行框的最小高度。最小高度由基线上方的最小高度和基线下方的最小深度组成，就像每个行框都以具有元素字体和行高属性的零宽度行内框开始。 我们称这个虚构的盒子为“支柱”。（这个名字的灵感来自 TeX。

所以就好像我们的容器内总是有一种种类宽度为 0 的文本来定义基线。

.box {
  background:linear-gradient(red,red) 0 22px/100% 1px no-repeat;
}

.box > * {
  outline:1px solid;
}

With text
<div style="padding: 8px 16px; background-color: green" class="box">
     BASELINE
    <div style="display:inline-block;font-size:18px;vertical-align:text-top">Hello</div>

    <div style="display:inline-block;font-size:72px;vertical-align:text-top">Help</div>
</div>
without text (the reference is the same)
<div style="padding: 8px 16px; background-color: green" class="box">
    <div style="display:inline-block;font-size:18px;vertical-align:text-top">Hello</div>

    <div style="display:inline-block;font-size:72px;vertical-align:text-top">Help</div>
</div>