Ответ 1

Проверьте нижнюю часть этого ответа на интерактивную версию этого ответа, которая поможет вам самостоятельно проверить утверждения из этого ответа. Этот ответ был основан на записи Винсента Де Оливейры в его блоге. Это необходимо прочитать.

Что такое базовый уровень?

Изображение ниже, и многие другие изображения, как правило, определяют базовую линию, но что это такое?

Встроенные текстовые элементы не имеют одинаковой высоты...

Чтобы измерить высоту встроенного текстового элемента, я буду использовать термин content-area. Содержимое области этих элементов для Windows рассчитывается следующим образом:

Content-area=(Win Ascent + Win Descent)/Em Size * Font Size

См. Несколько примеров ниже:

• Merriweather Sans имеет область содержимого 25px, потому что (2014 + 560)/2048 * 20≈25px
• У Noto Sans есть область содержимого 27px, потому что (2189 + 600)/2048 * 20≈27px

Вы можете найти эти значения, например, используя FontForge, как показано на скриншотах ниже:

Мерриуэзер Санс (справа), Ното Санс (слева)

В этом случае для каждого шрифта мы имеем [content-area] = [line-box], и это особый случай, в котором вы можете измерить область содержимого элемента с помощью dev-tools:

Как выровнять текстовые элементы, чтобы сделать текст доступным для чтения?

Для этого вы используете базовый уровень.

В приведенном ниже примере вы можете видеть, что увеличение высоты строки не увеличивает содержимое окна (цветная область), но увеличивает линеамент оранжевого встроенного элемента. Кроме того, обратите внимание, что оба элемента взаимно выровнены вдоль базовой линии. Базовый уровень определяется каждым шрифтом отдельно. Однако, когда два разных шрифта выравниваются вдоль их базовой линии, полученный текст легко читается.

Это изображение с базовой линией, показанной как зеленая линия:

В приведенном ниже примере оранжевый элемент выравнивается относительно верхней части родительской области содержимого. Тем не менее, элемент томатного цвета выровнен по отношению к базовой линии стойки родителя. Столбец - это символ нулевой ширины, который запускает линейную строку родителя.

Может показаться, что элемент томатного цвета поднялся, но это не так. Его положение относительно стойки не изменилось.

Вывод

Базовая линия - это строка, которую авторы шрифтов используют для создания своих шрифтов и делают разные шрифты "взаимно совместимыми". Исходная линия выбирается так, чтобы текст, составленный из разных шрифтов, все из которых имеют свою собственную область содержимого, можно выровнять вдоль базовой линии и оставаться легко читаемым.

Исходная базовая линия - базовая линия родительской стойки, которая является символом нулевой ширины с определенной базой, которая помогает выравнивать встроенные элементы.

Интерактивная версия этого ответа

@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 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 strut, which is a zero-width character with a defined baseline which helps to align inline elements.</p>

Ответ 2

Спецификация говорит вам, что родительское поле ссылается только на пару параграфов выше:

Следующие значения имеют смысл только для родительского встроенного элемента или для стойки элемента контейнера родительского блока.

Поэтому родительский блок ссылается на поле, сгенерированное родительским элементом, и вы вычисляете базовую линию родительского поля так же, как и любой другой элемент.

Ответ 3

Я также не нашел конкретного определения и в соответствии со спецификацией:

Следующие значения имеют смысл только для родительского встроенного элемента или для расположения элемента контейнера родительского блока

Вы можете сделать вывод, что если в родительском поле есть текстовый узел как дочерний, базовый уровень дочернего текстового узла является базовым значением родительского поля.

Например:

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

Ответ 4

Посмотрите на эту картинку, чтобы узнать, что такое базовая линия.

Теперь покажите, что хочет сказать док:

Когда вы определяете vertical-align: baseline по vertical-align: baseline тогда элемент выравнивается по базовой линии базовой линии родительского элемента, как показано на приведенном выше рисунке.