我无法理解以下摘录10 可视化格式化模型详细信息 – W3C https://www.w3.org/TR/CSS2/visudet.html.
摘录：
基线： 将框的基线与父框的基线对齐。如果该框没有基线，请将下边距边缘与父级的基线对齐。
在这种情况下，“父框的基线”是什么意思？ “父框”是指行框还是由父元素建立的框？如何计算“父框的基线”？
检查此答案的底部以获取此答案的交互式版本，这将帮助您自行验证此答案中的陈述。这个答案基于 Vincent De Oliveira 的帖子his blog https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align。这是必读的。
The image below, and many other images alike specify a basline, but what is it exactly?
为了测量内联文本元素的高度，我将使用术语内容区域。 Windows 中这些元素的内容区域计算如下：
Content-area=(Win Ascent + Win Descent)/Em Size * Font Size
请参阅下面的几个示例：
例如，您可以使用 FontForge 找到这些值，如下面的屏幕截图所示：
在这种情况下，对于每种字体，我们有 [content-area]=[line-box]，这是一种特殊情况，您可以使用开发工具测量元素的内容区域：
为此，您需要使用基线。
在下面的示例中，您可以看到增加行高并不会增加内容框（彩色区域），但会增加橙色内联元素的行框。此外，请注意两个元素沿着它们的基线相互对齐。基线由每种字体单独定义。然而，当两种不同的字体沿其基线对齐时，生成的文本就很容易阅读。
This is an image with the baseline showed as a green line: 
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 strut of the parent. A strut is a zero-width character which starts the line-box of the parent.
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.
基线是字体作者用来设计字体并使不同字体“相互兼容”的一条线。选择基线是为了使由不同字体组成的文本（它们都有自己的内容区域）可以沿着基线对齐并保持易于阅读。
父基线是父支柱的基线，它是一个零宽度字符，具有定义的基线，有助于对齐内联元素。
@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.stack.imgur.com/OvhU4.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.stack.imgur.com/4W8i6.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.stack.imgur.com/qmoIL.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>