Почему промежуток line-height бесполезен?

Во-первых, давайте посмотрим кусок кода:

div { width:200px; height:200px; border:1px solid black; line-height:200px; }
span { line-height:1.7;  }

<div><span>123<br>456<br>789<br>000</span></div>

Ответы

Ответ 1

Макеты блоков, такие как div по умолчанию, состоят из вертикального стека строк, которые никогда не имеют места между ними и никогда не перекрываются. Каждое линейное окно начинается с стойки, которая представляет собой воображаемый встроенный блок высотой высоты строки, заданной для блока. Строка строки затем продолжается с помощью встроенных блоков разметки в соответствии с их высотами строк.

На приведенной ниже диаграмме показан макет для вашего первого примера. Обратите внимание, что, поскольку в 1,7 раза высота шрифта намного меньше высоты стойки, высота линии определяется высотой стойки, так как поле строки должно полностью содержать свои встроенные прямоугольники. Если вы установили высоту линии на span больше 200px, строки строк будут выше, и вы увидите, что текст перемещается дальше.

Когда вы создаете встроенный блок span, связь между div и span не изменяется, но диапазон получает собственную структуру компоновки блоков со своим собственным стеком строк. Таким образом, текст и разрывы строк выкладываются внутри этого внутреннего стека. Стойка внутреннего блока в 1,7 раза превышает высоту шрифта, то есть то же, что и текст, а макет теперь выглядит так, как показано ниже, поэтому текстовые строки расположены ближе друг к другу, что отражает настройку высоты строки span,

(Обратите внимание, что две диаграммы находятся в разных масштабах.)

Ответ 2

Это по дизайну. В HTML-документе есть два типа элементов: block и inline. Встроенные элементы не прерывают поток документа, но блокируют элементы.

Элементы блока, как следует из названия, блокируют область на странице, которая содержит некоторый контент. Некоторые примеры элементов блока: <p> и <div>. Вы можете применить к этим элементам высоту, высоту линии и другие свойства CSS, чтобы изменить размер блока, а затем поток документа.

Элементы inline занимают минимальное пространство, необходимое для их рендеринга, что означает, что установка ширины и высоты для этих элементов не будет иметь никакого эффекта. Как вы уже видели, вы можете сказать браузеру относиться к встроенному элементу как к элементу блока, чтобы вы могли применять к ним высоту.

Пример этого можно увидеть при использовании элементов <li> для создания меню. <li> являются блочными элементами. Если вы создадите список, элементы будут отображаться вертикально на странице, гарантируя, что каждый элемент списка появится ниже предыдущего. Однако, если вы примените display: inline; к элементам списка, они теперь будут отображаться горизонтально.