我无法理解10 Visual formatting model details – W3C 的以下摘录。
摘录：
基线： 将框的基线与父框的基线对齐。如果框没有基线，则将底部边距边缘与父级的基线对齐。
在这种情况下，“父框的基线”是什么意思？ “父框”是指行框还是父元素建立的框？如何计算“父框的基线”？
【问题讨论】：
标签： css
查看此答案的底部以获取此答案的交互式版本，这将帮助您自行验证此答案中的陈述。此答案基于 Vincent De Oliveira 在his blog 上的帖子。必读。
下面的图片和许多其他类似的图片都指定了基线，但它到底是什么？
为了测量内联文本元素的高度，我将使用术语 content-area。对于 Windows，这些元素的内容区域计算如下：
Content-area=(Win Ascent + Win Descent)/Em Size * Font Size
请看下面的几个例子：
您可以找到这些值，例如，使用 FontForge，如下面的屏幕截图所示：
在这种情况下，对于每种字体，我们都有 [content-area]=[line-box]，这是一种特殊情况，您可以使用开发工具测量元素的内容区域：
为此，您需要使用基线。
在下面的示例中，您可以看到增加 line-height 不会增加 content-box（彩色区域），但会增加橙色内联元素的 line-box。此外，请注意两个元素都沿其基线相互对齐。基线由每种字体分别定义。但是，当两种不同的字体沿它们的基线对齐时，生成的文本很容易阅读。
这是一张基线显示为绿线的图像：
在下面的示例中，橙色元素相对于父内容区域的顶部对齐。但是，番茄色元素相对于父元素的 strut 的基线对齐。 strut 是一个零宽度字符，它启动父级的 line-box。
看起来番茄色元素向上移动了，但事实并非如此。它相对于支柱的位置没有改变。
基线是字体作者用来设计字体并使不同字体“相互兼容”的一条线。选择基线是为了使由不同字体组成的文本（它们都有自己的内容区域）可以沿基线对齐并保持易于阅读。
父基线是父支柱的基线，它是一个零宽度字符，具有定义的基线，有助于对齐内联元素。
@import url('https://fonts.googleapis.com/css?family=Merriweather+Sans');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans');
span {
margin: 0;
}
p.pr {
background-color: blue;
}
span.mw {
font-family: 'Merriweather Sans', sans-serif;
font-size: 20px;
line-height: 40px;
background-color: orange;
}
span.ar {
font-family: 'Noto Sans', sans-serif;
font-size: 20px;
background-color: tomato;
}<h1>What is baseline?</h1>
The image below, and many other images alike specify a basline, but what is it exactly?
<img src="https://i.imgur.com/SJrxQHj.png">
<br><br>
<h1>Inline text elements are not the same height...</h1>
To measure the height of an inline text element I will use the term <b>content-area</b>. Content-area of these elements for windows is calculated as follows:
<p>Content-area=(Win Ascent + Win Descent)/Em Size * Font Size</p>
<p>See a few examples below:</p>
<ul>
<li>Merriweather Sans has a content-area of 25px because (2014+560)/2048*20≈25px <span class="mw">Abg</span></li>
<li>Noto Sans has a content-area of 27px because (2189+600)/2048*20≈27px <span class="ar">Abg</span></li>
</ul>
<p>You can find this values using for example FontForge, as shown on the screenshots below:</p>
<table>
<tr>
<td><img src="https://i.imgur.com/h0th3Rv.png"></td>
<td><img src="https://i.imgur.com/aRymbaf.png"></td>
</tr>
</table>
In this case for each font we have [content-area]=[line-box] and this is a special case in which you can measure the content-area of the element with dev-tools:
<img src="https://i.imgur.com/4kuFCIf.png">
<h1>How to align text elements to make text readable?</h1>
<p>To do this you use the baseline.</p>
In the example below you can see that increasing the line-height doesn't increase the content-box (the colored area), but it does increase the line-box of the orange inline element. Furthermore, notice that <b>both elements are mutually aligned along their baseline which is defined by the font itself.</b> The baseline is defined by each font separately. However, when two different fonts align along their baseline, the resulting text is easily readable.
<p class="pr">
<span class="mw">Abg (line-height=40px)</span><span class="ar">Abg</span>
</p>
This is an image with the baseline showed as a green line: <img src="https://i.imgur.com/OlHqb3J.png">
<br><br>
In the example below, the orange element is aligned in respect to the top of the parent's content area. However, the tomato colored element is aligned in respect to the baseline of the <b>strut</b> of the parent. A strut is a zero-width character which starts the line-box of the parent.
<br><br>
It might seem that the tomato colored element has moved up, but it is not the case. Its position relative to the strut has not changed.
<p class="pr">
<span class="mw" style="vertical-align:top;">Abg</span><span class="ar">Abg</span>
</p>
<h1>Conclusion</h1>
<p>A baseline is a line which typeface authors use to design their fonts. The baseline is chosen so that a text composed out of different fonts, which all have their own content-area, can be aligned along the baseline and remain easily readable.</p>
<p>A parent baseline is a baseline of the parent's strut, which is a zero-width character with a defined baseline which helps to align inline elements.</p>【讨论】：
.child 元素，即vertical-align:baseline 没有与strut 对齐，而是与其父元素的基线对齐，而父元素本身故意偏离了strut 的基线。这就是规范在 Boltclock 引用中的含义：“关于父内联元素，或到父块容器元素的支柱”
我也没找到具体的定义，根据规范：
以下值仅对父内联元素或父块容器元素的支柱有意义
可以推断，如果父框有一个文本节点作为子节点，则子文本节点的基线就是父框的基线。
例如：
.parent {
display: inline;
background:pink;
font-size:40px;
font-family:Microsoft Yahei;
line-height:2;
vertical-align:baseline;
}
.element-child {
font-size:25px;
}<div class="parent">
textNode child of parent
<span class="element-child">
element-child with another font-size
</span>
</div>无论有无子文本节点，父框的基线与子文本节点的基线位置相同。
【讨论】：
规范告诉您父框指的是上面的几段：
以下值仅对父内联元素或父块容器元素的支柱有意义。
所以父框指的是由父元素生成的框，您可以像计算任何其他元素一样计算父框的基线。
【讨论】：
查看this picture 以了解baseline 到底是什么。
现在，让我们演示一下文档想说的话：
当您定义vertical-align: baseline 时，该元素将与父元素基线的基线对齐，如上图所示。
【讨论】：