Полагаю, вы не понимаете эталон выравнивания (относительно чего он выравнивается?).
Я попытаюсь объяснить это простыми словами.При использовании vertical-align с элементом a вы выравниваете его относительно его родительского элемента b , где высота равна a (b является ссылкой).Используя правильные слова, это выглядит так:
Свойство вертикального выравнивания можно использовать в двух контекстах:
Для вертикального выравнивания встроенного блока элемента внутри его содержит строку box .Например, его можно использовать для вертикального позиционирования <img> в строке текста. ref
Таким образом, элемент a является блок встроенного элемента , а элемент b - это строка , содержащая строку , а высота b определяется как line-height , как вы уже прочиталив спецификации.
Теперь давайте рассмотрим ваш код и шаг за шагом добавим свойства.
Сначала давайте удалим 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), и это сделает верхссылка отличается от text-top.Чтобы напомнить об этом, вот фигура, которую я поделился с вами до ref :
И если мы прочитаем определение означение text-top из vertical-align:
Выравнивает верх элемента с верхом шрифта родительского элемента .
Таким образом, верхняя часть внутреннего промежутка будет совмещена с верхом текста наружного промежутка, поэтому она переместилась в нижнюю часть.Тогда высота основного контейнера .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, поскольку он является блочным элементом. Попробуйте создать элемент .body inline и посмотрите, что произойдет.
Теперь вы также можете добавить определенный элемент 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>