Поле выравнивания для inline-block незамещенных элементов

Я думаю, вы сбиваете с толку ссылку на выравнивание (относительно чего оно выравнивается?).

Я постараюсь объяснить это легкими словами. При использовании vertical-align с элементом a вы выравниваете его относительно его родительского элемента bкакая высотаa (b является ссылкой). Используя правильные слова, это выглядит так:

The vertical-align property can be used in two contexts:

To vertically align an inline element's box inside its containing linebox. For example, it could be used to vertically position an <img> in a line of text.^ref

Таким образом, элемент a - это поле встроенного элемента, а элемент b - это содержащий строку, а высота b определяется его высота линии, как вы уже читали в спецификации.

Теперь давайте рассмотрим ваш код и пошагово добавим свойства.

Первоначально снимаем inline-block

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

.inline-block.text {
  vertical-align: text-top;
}

<div class = "body">
  <span>
words-g 
  <span class = "inline-block text">inline-block</span> words-g w
  </span>
</div>

Как вы можете видеть, внутренний промежуток имеет тот же height / line-height, что и внешний промежуток, и оба используют один и тот же font-family. Таким образом, логически мы ничего не видим при использовании text-top в качестве вертикального выравнивания.

Теперь добавим в контейнер line-height:2:

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
  line-height:2;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

.inline-block.text {
  vertical-align: text-top;
}

<div class = "body">
  <span>
words-g 
  <span class = "inline-block text">inline-block</span> words-g w
  </span>
</div>

В этой ситуации оба диапазона унаследуют line-height:2, таким образом, вычисленное значение будет 32px (2 * font-size), и это сделает верхнюю ссылку разные из текста сверху. Чтобы напомнить об этом, вот цифра, которой я поделился с вашим before^ref:

И если мы прочитаем определение значения text-top для vertical-align:

Aligns the top of the element with the top of the parent element'sfont.

Таким образом, верх внутреннего диапазона будет выровнен с верхом текста внешнего диапазона, поэтому он переместился вниз. Тогда высота основного контейнера .body не будет равна 32px, а будет больше, потому что он будет учитывать движение внутреннего пролета (у нас будет 37px).

Теперь добавим inline-block во внутренний элемент:

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
  line-height:2;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

.inline-block.text {
  vertical-align: text-top;
  display:inline-block;
}

<div class = "body">
  <span>
words-g 
  <span class = "inline-block text">inline-block</span> words-g w
  </span>
</div>

Первое, что вы заметите, это то, что текст не сдвинулся, НО оранжевый фон покрывает большую высоту. Это связано с тем, что наш элемент будет вести себя как блок-контейнер, и эта высота равна line-height текста (32px), которая также является расстоянием между верхом и низом на изображении выше (изначально он охватывал от text-bottom до text-top).

Это также похоже на синий фон элемента .body, поскольку этот элемент является блочным. Попробуйте сделать элемент .bodyinline и посмотрите, что будет.

Теперь вы также можете добавить к элементу конкретный height, и ничего не изменится, потому что мы выравниваем относительно родительский элемент. Вы также можете поиграть со всеми достоинствами vertical-align, чтобы увидеть различное поведение:

.body {
  font-family: Microsoft Yahei;
  font-size: 16px;
  background-color: lightblue;
  line-height:2;
  margin:5px;
}

.body span {
  background-color: pink;
}

.body .inline-block {
  background: orange;
}

.inline-block.text {
  display:inline-block;
  height:50px;
}

<div class = "body">
  <span>
Align the 
  <span class = "inline-block text" style = "
  vertical-align: text-top;">top of this</span> with text-top
  </span>
</div>

<div class = "body">
  <span>
Align the 
  <span class = "inline-block text" style = "
  vertical-align: top;">top of this</span> with top
  </span>
</div>

<div class = "body">
  <span>
align the 
  <span class = "inline-block text" style = "
  vertical-align: text-bottom;">bottom of this</span> with text-bottom
  </span>
</div>

<div class = "body">
  <span>
align the 
  <span class = "inline-block text" style = "
  vertical-align: bottom;">bottom of this</span> with bottom
  </span>
</div>

Заявление

for inline non-replaced elements, the box used for alignment is the box whose height is the 'line-height'

не относится к инлайн-блокам. Встроенные блоки не являются встроенными элементами. Встроенные элементы - это элементы с display: inline, которые генерируют встроенные блоки. Встроенные блоки - это не встроенные блоки, а встроенный уровень (важна часть «-уровня»!) блочные контейнерные ящики. Следовательно, заявление

For all other elements, the box used for alignment is the margin box.

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

Любая часть спецификации, которая, как говорят, применяется к встроенным элементам, не применяется к встроенным блокам.