HTML / CSS: вертикальный диапазон выравнивания с вертикальным выравниванием и высотой строки

Question

Извините, что бил мертвую лошадь, но я не могу на всю жизнь понять, почему ниже не работает.

• Набор line-height: 50px
• Набор vertical-align: top
• Насколько я понимаю, это должно привести к росту строки в 50px, и тогда vertical-align должен в соответствии с MDN иметь возможность перемещать встроенный элемент внутри него.

В частности:

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

низ

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

Я пробовал и то и другое:

<span style="line-height: 50px; border: 1px solid red; vertical-align: bottom">Some text</span>

А это:

<div style="line-height: 50px; border: 1px solid yellow">
   <span style="border: 1px solid red; vertical-align: bottom">Some text</span>
</div>

Это последняя версия выше, которую я хотел бы расположить в нижней части пролета. Он говорит, что строковый блок должен быть 50px, тогда vertical-align используется для ребенка span.

PS: Пожалуйста, не говорите «используйте flexbox» или подобное. Я хотел бы понять внутреннюю работу / концептуально, почему вышеупомянутое не поместило промежуток в нижней части линии.

---

EDIT

• Это сообщение не является дубликатом Как мне выровнять что-то внутри тега span? . См. Комментарий ниже для объяснения причин.

Answer 1

Линейный блок может иметь несколько элементов с разной высотой строки. Например:

<p>
  <span class="segment1">Segment 1</span>
  <span class="segment2">Segment 2</span>
  <span class="segment3">Segment 3</span>
</p>

По умолчанию все элементы в абзаце имеют одинаковую высоту строки.

Но если элементы span имеют меньшую высоту строки, чем абзац, я могу настроить их относительно друг друга с помощью vertical-align.

p {
  background-color: black;
  color: white;
  line-height: 40px;
}

.segment1 {
  background-color: red;
  line-height: 20px;
  vertical-align: top;
}

.segment2 {
  background-color: green;
  line-height: 20px;
  vertical-align: baseline
}

.segment3 {
  background-color: blue;
  line-height: 20px;
  vertical-align: bottom;
}

Посмотрите на этот код: https://codepen.io/anon/pen/pVWQQy

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

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

Во втором примере вы пытаетесь выровнять по вертикали встроенный элемент (<span>) внутри элемента блока (<div>), а не строковый блок .

Answer 2

Все, что вы сказали, правильно, но вы просто забыли что-то, что наследство . Элемент span имеет ту же высоту строки, что и для div, поэтому bottom не имеет никакого эффекта в вашем случае.

Сбросьте значение до initial, и оно будет работать.

<div style="line-height: 50px; border: 1px solid yellow">
<span style="border: 1px solid red; vertical-align: bottom;line-height:initial;">Some text</span>
</div>

Answer 3

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

<div style="height: 50px; border: 1px solid blue; vertical-align: top;">
   <span style="border: 1px solid red;">Some text</span>
</div>