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

Question

据我了解，vertical-align 根据文本字体的 baseline 对齐 inline-block 元素。当 inline-block 元素有一个文本兄弟时，这是有意义的，这样我们就知道用作 baseline.[=13 的字体大小是多少=]

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

例如：

<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>

输出为：

这里究竟发生了什么？什么是基线？

Answer 1

来自the specification：

The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.

和

On a block container element whose content is composed of inline-level elements, 'line-height' specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by 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>

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

If two sibling inline elements are marked with vertical-align, what's the font serving as baseline?

css

vertical-alignment