Line height 1: css — What is line-height:1?

line-height в CSS | Учебные курсы

Свойство line-height, когда применяется к блочному элементу, определяет высоту каждой строки. Не следует путать с межстрочным расстоянием в большинстве графических программ (вроде Photoshop), которое определяет пространство между строками в абзаце. Несмотря на то, что они оба выполняют одну и ту же задачу (интервал между строк текста), делают они это по-разному.

Свойство line-height использует следующие единицы:

• px
• em
• %
• безразмерные числа, вроде 1.5

Эти безразмерные значения в основном действуют как проценты. Таким образом, 150% равно 1.5. Последнее является просто более компактным и читаемым.

Почему важно line-height

Целью line-height является определение комфортного расстояния между строк для вашего текста. Поскольку удобочитаемость зависит от размера текста, рекомендуется использовать динамическое значение связанное с размером текста. Использование px поэтому и не рекомендуется, так как пиксели определяют статическое значение.

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

Поскольку применение % или em может дать неожиданный результат, рекомендуемый метод связан с безразмерными числами:

• для основного текста line-height рекомендуется как 1.5 от размера текста;
• для заголовков line-height рекомендуется значение 1.2.

body { font-size: 16px; line-height: 1.5; }

Вычисленная высота строки будет, таким образом, 16 * 1.5 = 24px.

Наследование line-height

Поскольку свойство line-height наследуется дочерними элементами, оно будет оставаться постоянным, независимо от того, какой font-size впоследствии применяется.

body { font-size: 16px; line-height: 1.5; }
blockquote { font-size: 18px; }

Элемент <blockquote> будет иметь высоту строки 27px.

Глубокое погружение в CSS: показатели шрифтов, line-height и vertical-align

Line-height и vertical-align — это простые CSS свойства. Они настолько просты, что большинство из нас убеждено в том, что в полной мере понимают, как они работают и как их использовать. Но это не так. В действительности же они сложны. Можно даже считать, что они являются самыми сложными свойствами, т.к. они играют важную роль в создании мало известной особенности CSS: в строчном форматировании текста.

Например, line-height может быть установлен в качестве длины или безразмерного значения, но по умолчанию у него задано значение normal. Окей, но что такое normal? Пишут, что чаще всего это 1 или может даже 1.2. Но даже в спецификации по CSS нет ясного ответа на этот вопрос. Мы знаем, что line-height — безразмерное свойство относительно родительского значения font-size, но проблема заключается в том, что

Глубокое погружение в CSS не такой простой механизм…

Давайте сперва поговорим о font-size

Посмотрите на простой HTML код. Тег p содержит три span, каждый из которых имеет свой собственный font-family:

<p>
    <span>Ba</span>
    <span>Ba</span>
    <span>Ba</span>
</p>

p  { font-size: 100px }
.a { font-family: Helvetica }
.b { font-family: Gruppo    }
.c { font-family: Catamaran }

Используя некоторое значение font-size с различными font-family, мы получаем элементы разной высоты:

Разные font-family, одинаковое значение font-size, получаем разную высоту элементов

Почему font-size: 100px не создает элементы с высотой в 100px? Я измерил и получилось:

• Helvetica — 115px;
• Gruppo — 97px;
• Catamaran — 164px.

Элементы со значением font-size:100px имеют разную высоту

Все это кажется немного странным, на первый взгляд, но это вполне объяснимо. Причина находится внутри самого шрифта. Вот как это работает:

• шрифт определяется его em-квадратом (или единицей em) своего контейнера, в котором будет нарисован каждый символ. Этот квадрат использует относительные единицы и обычно устанавливает значение на уровне 1000 единиц. Но здесь также может применяться значение 1024, 2048 и т.д.
• устанавливается на основе своих относительных единиц, показателей шрифтов (ascender, descender, capital height, x-height и т.д.). Обратите внимание, что некоторые значения могут выходить за пределы em-квадрата.
• в браузере относительные единицы масштабируются, чтобы нужный размер соответствовал шрифту.

Давайте возьмем шрифт Catamaran и откроем его в FontForge, чтобы получить его показатели:

• em-квадрат 1000;
• Ascender — 1100 и Descender — 54. После выполнения некоторых тестов, окажется, что браузеры используют значения HHead Ascent/Descent  на Mac OS, а также значения Ascent/Descent на Windows (эти значения могут отличаться!). Отметим также, что прописная буква имеет высоту 640px и высота обычной буква составляет 485px.

Значения шрифта в FontForge

Это значит, что шрифт Catamaran использует 1100 + 540 единиц при 1000 единиц в em-квадрате, который дает высоту 164px, в то время, как в настройках указано font-size: 100px. Эта вычисленная высота определяется как контент-область (content-area) элемента и я буду использовать этот термин далее в этой статье. Вы можете думать о контент-области, как об области, для которой применяется свойство background.

Мы также можем увидеть, что заглавные буквы имеют высоту 68px (680 единиц) и строчные буквы (x-height) — 49px (485 единиц).  В результате, 1ex = 49px и 1em = 100px, а не 164px (к счастью, em основан на размере шрифта, а не на вычисленной высоте).

Шрифт Catamaran: эквивалент UPM и пикселей при использовании font-size: 100px

Прежде чем идти дальше, оставлю некоторое пояснение. Когда элемент <p> отображается на экране, то он может состять из нескольких линий, в соответствии с его шириной. Каждая строка состоит из одного или нескольких inline-элементов (HTML-теги или встроенные imline-элементы для текстового содержимого) и имеет название line-box. Высота line-box основана на высоте его дочерних элементов. Таким образом, браузер вычисляет высоту для каждого inline-элемента, и, следовательно, высоту line-box (от высшей точки своего дочернего элемента к самой нижней точке своего дочернего элемента). В результате line-box — достаточно высок, чтобы содержать все свои дочерние элементы (по умолчанию).

Каждый HTML-элемент на самом деле является неким множеством, состящим из line-boxes. Если вы знаете высоту каждого line-box, Вы знаете высоту элемента.

Если обновить предыдущую страницу HTML код, то получим:

<p>
    Good design will be better.
    <span>Ba</span>
    <span>Ba</span>
    <span>Ba</span>
    We get to make a consequence.
</p>

Он будет генерировать три line-boxes:

• первый и последний, каждый из которых содержит единственный встроенный элемент (содержание текста)
• второй, содержащий два встроенных элемента и три<span>

Тег <р> (черная рамка) сделана из line-boxes (белые границы), которые содержат inline-элементы (сплошные границы) и анонимные inline-элементы (пунктирные границы)

Мы ясно видим, что второй line-box выше остальных, в связи с вычисленной контент-областью его дочерних элементов, один из которых использует шрифт Catamaran.

Трудным в создании line-box является то, что мы не можем видеть и управлять им с помощью CSS. Даже применяя background с псевдоклассом ::first-line не дает нам ни какой визуальной подсказки о высоте line-box.

line-height: к проблемам и за ее пределами

Ранее я ввел два понятия: контент-область (content-area) и line-box. Если вы читали внимательно, то я сказал, что высота line-box вычисляется в соответствии с его дочерней высотой, я не сообщал дочерним элементам высоту их контент-области. В этом и заключается больше различие.

Хотя это может показаться странным, inline-элемент имеет две разные высоты: высоту content-area и высоту virtual-area (Я изобрел термин virtual-area , обозначая таким образом высоту, невидимую для нас. Этого термина Вы не найдете в спецификации).

• высота content-area определяется показателями шрифта (как показано выше)
• высота virtual-area — этоline-height , а также это высота, которая используется для вычисления высоты line-box

Inline-элементы, имеющие две разные высоты

Это ломает распространенное мнение о том, что line-height это расстояние между базовыми линиями (baselane). В CSS это не так.

В CSS, the line-height — это не расстояние между двумя базовыми линиями

Рассчитанная разность высот между virtual-area и content-area называется ведущей. Половина этой ведущей добавляется к верхней части content-area, другая часть — к нижней. Content-area располагается всегда в центре virtual-area.

На основе его значений, line-height (virtual-area) может быть больше, меньше или равной content-area. В случае меньшего размера virtual-area, ведущее значение станет отрицательным и line-box стане визуально меньше его дочернего элемента.

Существуют также другие виды inline-элементов:

• inline-элементы (<img>, <input>, <svg>, etc.)
• inline-block и все inline-* элементы
• inline-элементы, которые используются в качестве форматирования текста (например, во flexbox-элементах)

Для этих inline-элементов, высота вычисляется на основе height, margin и border. Если height имеет значение auto, то line-height используется в content-area и строго равна line-height.

Inline замещаемые элементы, inline-block/inline-* и blocksified inline элементы имеют контент-область, равную их высоте или высоте линии

Итак, вернемся к FontForge. Em-квадрат шрифта Catamaran равен 1000, но мы видим значения ascender/descender:

• Ascent/Descent: ascender — 770 и descender — 230. Используется для символьных рисунков. (табл. “OS/2”)
• показатели Ascent/Descent: ascender — 1100 и descender — 540. Используется для высоты content-area. (табл. “hhea” и табл. “OS/2”)
• показатель Line Gap. Используется дл line-height: normal, путем добавления этого значения показателей Ascent/Descent. (табл. “hhea”)

В нашем случае, шрифт Catamaran определяет разрыв в 0 единиц для line gap, поэтому line-height: normal будет равен content-area, который составляет 1640 единиц, иначе 1.64.

В качестве сравнения, шрифт Arial описывает em-квадрат в 2048 единиц, ascender — 1854, descender — 434 и line gap составляет 67. Это означает, что font-size: 100px дает content-area — 112px (1117 единиц) и line-height: normal — 115px (1150 единиц, иначе 1.15). Все эти показатели шрифта устанавливаются разработчиком шрифта.

Становится очевидным, что установка line-height: 1 плохая практика.Я хотел бы напомнить вам, что безразмерное значение относительно для font-size и virtual-area меньше, чем content-area. Именно это и является источником многих наших проблем.

Используя line-height: можно создать line-box меньше, чем контент-область

Уточнения о вычислении line-box:

• для inline-элементов, padding и border увеличивают область фона, но не высоту content-area (или высоту line-box).Сontent-area — это не всегда то, что ты видишь на экране. margin-top и margin-bottom не имеют ни какого эффекта.
• для inline-элементов, inline-block и blocksified inline-элементы: padding, margin и borderувеличивают height, а значит увеличивают content-area и высоту line-box

vertical-align: свойство, которое управляет всеми

Я еще не упомянул о свойстве vertical-align, несмотря на то, что оно важно для вычисления высоты line-box. Можно даже сказать, что vertical-align играет ведущую роль в форматировании текста.

Значение по умолчанию — baseline. Помните о показателях шрифта ascender и descender? Эти значения определяют, где базовая линия стоит, а значит определяет и ее соотношение. Т.к. соотношение между ascenders и descenders редко бывает 50:50.

Начнём с кода:

<p>
    <span>Ba</span>
    <span>Ba</span>
</p>

p {
    font-family: Catamaran;
    font-size: 100px;
    line-height: 200px;
}

Тег <p> с двумя <span> унаследовал значения font-family, font-size и имеют постоянный line-height. Базовые линии (baselines) будут соответствовать и высота line-box  будет равна их line-height.

Те же значения шрифта, одинаковые исходные условия, кажется, что все в порядке

Что делать, если второй элемент имеет меньший font-size?

span:last-child {
    font-size: 50px;
}

Как ни странно, но по умолчанию базовая линия может выровнять выше (!) line-box так, как показано на картинке. Я хотел бы напомнить вам, что высота line-box вычисляется от самой высокой точки своего дочернего элемента к низшей точке своего дочернего элемента.

Меньший дочерний элемент может привести к увеличении высоты line-box

Это может быть аргументом в качестве использования безразмерного значения line-height, но иногда необходимо его фиксировать, чтобы создать идеальный вертикальный размер. Если честно, то независимо от того, что вы выберете, вы всегда будете иметь проблемы с inline выравниванием.

Рассмотрим еще один пример. Тег <p> с line-height: 200px, содержащий один <span>, унаследовал значение line-height

<p>
    <span>Ba</span>
</p>

p {
    line-height: 200px;
}
span {
    font-family: Catamaran;
    font-size: 100px;
}

Насколько высок line-box? Следует ожидать, что 200px, но это не так. Проблема здесь заключается в том, что <p> имеет свой собственный font-family (по умолчанию serif). Базовые линии тега <p> и <span> скорее всего, будут различны, а высота line-box выше, чем ожидалось. Это происходит потому, что браузеры производят вычисления следующим образом: так, как если бы каждый line-box начинался бы с нулевой ширины символа.

Невидим, но заметен.

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

Каждый дочерний элемент выравнивается так, как если бы его line-box появился бы с невидимой нулевой ширины символа

Базовая линия скачен, но что можно сказать на счетvertical-align: middle? Как пишут в спецификации, middle “выравнивает вертикальную среднюю точку контейнера с базовой линией родительского контейнера плюс половина x-height родительского блока”. Соотношение базовых линий различны, а также  как различно соотношение x-height, следовательно выравнивание middle не надежно. Как правило, middle никогда не бывает по “середине”. Этому способствуют много факторов в CSS (x-height, ascender/descender соотношение, и тд.)

В качестве примечания:

• vertical-align: top / bottom выравнивает по верху и низу line-box
• vertical-align: text-top / text-bottom выравнивает по верху и низу content-area

Vertical-align: top, bottom, text-top и text-bottom

Но используйте с осторожностью, это выравнивает virtual-area. Посмотрите это на простом примере, используя vertical-align: top. Невидимый line-height может привести к странным, но не удивительным, результатам.

vertical-align может привести к нечетным результат на первых порах, но предполагается, что line-height создаст визуализацию

И в заключении стоит отметить, что vertical-align также принимает числовые значения, которые повышают или понижают поле относительно базовой линии.

CSS превосходен

Мы поговорили о том, как line-height и vertical-align работают вместе, но теперь вопрос: можно ли управлять показателями шрифта с помощью CSS? Короткий ответ: нет.

Что делать, если, например, мы хотим, чтобы текст с помощью шрифта Catamaran, где высота заглавной буквы 100px стал выше? Давайте немного займемся математикой.

Сначала мы устанавливим все показатели шрифта в качестве CSS-свойств, а затем вычислим font-size,чтобы получить высоту заглавной буквы 100px.

p {
    /* font metrics */
    --font: Catamaran;
    --capitalHeight: 0.68;
    --descender: 0.54;
    --ascender: 1.1;
    --linegap: 0;

    /* desired font-size for capital height */
    --fontSize: 100;

    /* apply font-family */
    font-family: var(--font);

    /* compute font-size to get capital height equal desired font-size */
    --computedFontSize: (var(--fontSize) / var(--capitalHeight));
    font-size: calc(var(--computedFontSize) * 1px);
}

Высота заглавной буквы — 100px

Довольно просто, не так ли? Но что, если мы хотим, чтобы текст визуально стоял по середине? Так чтобы оставшееся пространство равномерно распределялось по верхней и нижней части буквы «B»? Для достижения этой цели, мы должны вычислить vertical-alignбазирующийся на соотношении ascender/descender.

Во-первых, установим line-height: normal и высоту content-area:

p {
    …
    --lineheightNormal: (var(--ascender) + var(--descender) + var(--linegap));
    --contentArea: (var(--lineheightNormal) * var(--computedFontSize));
}

Затем нам нужно установить:

• расстояние от нижней части буквы к нижнему краю
• расстояние от верхней части буквы к верхнему краю

Вот так:

p {
    …
    --distanceBottom: (var(--descender));
    --distanceTop: (var(--ascender) - var(--capitalHeight));
}

Теперь мы можем вычислить vertical-align, которая представляет собой разность между расстояниями, умноженное на величину font-size. (мы должны применить это значение для дочернего элемента inline)

p {
    …
    --valign: ((var(--distanceBottom) - var(--distanceTop)) * var(--computedFontSize));
}
span {
    vertical-align: calc(var(--valign) * -1px);
}

В конце концов, мы устанавливаем желаемый line-height и вычисляем его при сохранении вертикального выравнивания:

p {
    …
    /* desired line-height */
    --lineheight: 3;
    line-height: calc(((var(--lineheight) * var(--fontSize)) - var(--valign)) * 1px);
}

Результат установки для line-height разных значений. Текст всегда располагается по середине.

Добавить значок, высота которого соответствует букве «B», теперь легко:

span::before {
    content: '';
    display: inline-block;
    width: calc(1px * var(--fontSize));
    height: calc(1px * var(--fontSize));
    margin-right: 10px;
    background: url('https://cdn.pbrd.co/images/yBAKn5bbv.png');
    background-size: cover;
}

Иконка и буква B имеют одинаковую высоту

Обратите внимание, что это демо предназначено только для демонстрационных целей. Почему? На это есть много причин:

• показатели шрифта могут быть не постоянными ¯⁠\⁠(ツ)⁠/⁠¯
• если шрифт не загружен, то резервный шрифт, верноятно, будет иметь различные показатели шрифта и иметь дело с несколькими значениями, а значит — станет не управляемым.

Выводы

• inline форматирование текста действительно трудно понять;
• все inline-элементы имеют 2 высоты:
  • контент-области, иначе content-area (данные берутся из показателей шрифта)
  • виртуальная область, иначе virtual-area (line-height)
  • ни один из этих 2-х высот не может быть визуализирован.
• line-height: normal основан на показателях шрифта
• line-height: normal может создать virtual-area меньше, чем content-area
• vertical-align не очень надёжен
• высота line-box вычисляется на основе своих дочерних элементов со свойствами line-height и vertical-align
• мы не можем легко получить / установить показатели шрифта при помощью CSS
• есть спецификация, чтобы помочь с вертикальным выравниванием: Line Grid module

Но я до сих пор люблю CSS 🙂

Ресурсы

Перевод статьи «Deep dive CSS: font metrics, line-height and vertical-align»

Концепции и примеры CSS line-height Однострочный многострочный текст центрируется по вертикали

Эта статья также была опубликована вhttps://github.com/zhangyachen/zhangyachen.github.io/issues/37

Расстояние между базовыми линиями двух строк текста.

Общее положение базовой линии

Положение базовой линии можно рассматривать как положение нижнего края буквы x.
Базовое положение разных шрифтов будет немного отличаться.

Несколько строк в тексте:

Принципиальная схема высоты ряда:

Высота строки текста составляет: верхний интервал + высота текста + нижний интервал, а верхний интервал равен нижнему интервалу.
В основном мы можем думать об этом так: высота строки — это расстояние между базовой линией двух строк текста, расстояние между верхней строкой двух строк текста и расстояние между центральные линии двух строк текста.

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

Область содержимого связана только с размером шрифта и шрифтом и не имеет ничего общего с высотой строки!
В шрифте Times New Roman высота области содержимого = размеру шрифта. В других шрифтах высота области содержимого ≈ размер шрифта.

Встроенные боксы

Во встроенном блоке содержимое не отображается в виде блоков, а отображается в виде строки.Если внешняя метка содержит встроенные теги (span, a, em и т. Д.), Она принадлежит встроенному блоку. Если есть только текст, это «анонимный встроенный блок».

Линейные боксы

Каждая строка является строковым блоком, а каждый строчный блок состоит из встроенных блоков.

Содержащая коробка

Состоит из строковых боксов построчно.

Короче:Включить коробкувключаютПоле строкивключаютВстроенная коробка

• Для элементов уровня блока line-height определяет строчные поля внутри элемента.Наименьшийвысота
• Для не заменяемых строчных элементов line-height используется для вычисления высоты строкового блока.

• Для альтернативных встроенных элементов, таких как input, button, line-height не влияет

  normal

Зависит от пользовательского агента. Настольные браузеры (включая Firefox) используют значение по умолчанию, которое составляет около 1,2, в зависимости от семейства шрифтов элемента.

line-height: normal;

number

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

line-height: 3.5;

length

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

line-height: 3em;

percentage

Это связано с размером шрифта самого элемента. Расчетное значение — это размер шрифта, рассчитанный путем умножения заданного процентного значения на элемент.

line-height: 34%;

inherit

IE8+
Высота строки по умолчанию для полей ввода и других элементов нормальная, что можно использовать

line-height: inherit ;

Сделайте элементы более управляемыми.

Разница между высотой строки: 1,5, высотой строки: 150%, высотой строки: 1,5 м

Эффект от em такой же, как от%.

line-height:1.5

Все наследуемые элементы пересчитывают высоту строки в соответствии с размером шрифта.

<div>
    <div>
        Мой размер шрифта 60 пикселей
    </div>
</div>

#father{
        font-size:12px;
    line-height:1.5;
    width:300px;
}
#son{
    font-size:60px;
    color:white;
}

В это время высота строки элемента #son составляет 60 * 1,5 = 75 пикселей;

line-height:150%/line-height:1.5em

Текущий элемент вычисляет высоту строки в соответствии с размером шрифта и наследует вычисленное значение следующим элементам.

<div>
    <div>
                 Мой размер шрифта 60 пикселей
    </div>
</div>

#father{
        font-size:12px;
    line-height:150%;
    width:300px;
}
#son{
    font-size:60px;
    color:white;
}

В настоящее время высота строки элемента #son составляет 12 пикселей * 150% = 18 пикселей. Поскольку высота текстового поля элемента #son составляет 60 пикселей, межстрочный интервал элемента #son примерно равен (18-60) / 2 = -21 пикселей; поэтому две строки в элементе #son перекрываются. .

Рекомендуется использовать безразмерные значения для присвоения высоты строки

<div>
    <img src="muke/resource/photo/1_0.jpeg">
</div>

div{
      background-color: #abcdef;
}
img{
      width: 300px;
      height: 300px;
}

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

<div>
    <img src="muke/resource/photo/1_0.jpeg">
         <span> xxxx Я текст после картинки </span> <br>
</div>

div{
      background-color: #abcdef;
}
img{
      width: 300px;
      height: 300px;
}
span{
       background-color: white;
}

Обратите внимание, что нижняя часть изображения выровнена с нижним краем (базовой линией) буквы x, поэтому мы можем представить, что изображение выровнено по базовой линии последующего текста (никакой текст после изображения не может рассматриваться как имеющий текст ), так что есть картинка под картинкой Небольшой зазор. Почему изображение должно быть выровнено по базовой линии текста? Поскольку для атрибута vertical-align по умолчанию используется базовая линия. В будущем у меня будет время подробно изучить атрибут vertical-align.

Как устранить зазор под рисунком

• Выровняйте нижнюю линию рисунка

img{
      width: 300px;
      height: 300px;
      vertical-align:bottom;
}

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

• Блок изображения

img{
      width: 300px;
      height: 300px;
      display:block;
}

Поскольку атрибут vertical-align действителен только для встроенных элементов, превращение изображения в блочный элемент может сделать vertical-align: baseline недействительным.

• Высота строки достаточно мала, чтобы базовая линия двигалась вверх.

div{
      background-color: #abcdef;
      line-height:0;
}

Здесь возникает вопрос. В настоящее время базовая линия должна быть выше нижней части изображения. Почему изображение не совмещено с базовой линией?

<div>
           Отдельная строка текста центрируется по вертикали
</div>

div{
      background-color: #abcdef;
      height: 300px;
      line-height: 300px;
}

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

<div>
         <div id = "son"> Многострочный текст центрируется по вертикали <br> Многострочный текст центрируется по вертикали <br> Многострочный текст центрируется по вертикали <br> </div>
</div>

#father{
       line-height:300px;
       background-color: #abcdef;
       height: 300px;
}
#son{
       line-height: normal;
       display: inline-block;
       vertical-align: middle;
       border: 1px red solid;
}

Многострочный текст центрирован. Мы можем обрабатывать многострочный текст как единое целое, то есть одну строку. Проблема преобразуется в приведенный выше однострочный текст с центром, поэтому мы позволяем высоте родительского элемента = -высота. Чтобы переопределить унаследованную line-height, мы используем line-height: normal в элементе #son. Посмотрите на эффект:

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

Справочные материалы:http://www.imooc.com/learn/403
http://www.imooc.com/article/7767
https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-height

Что такое line-height:1? — CodeRoad

Речь идет о назначении линии-высоты.

Я начал изучать css. высота линии: часто встречаются примеры назначения 20px или единицы измерения. Иногда это высота линии: есть 1 и вещь без единицы, но какой смысл это приобретает?

font: font-style font-variant font-weight font-size/line-height font-family;

body{
    line-height:1; /* as seen in Eric Meyer's reset css */
}
p{
    font:normal normal normal 14px "Times New Roman", Times, serif;
}

p{
    font:normal normal normal 14px/1 "Times New Roman", Times, serif;
}

/* Keyword value */
line-height: normal;

/* Unitless values: use this number multiplied
    by the element's font size */
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>line-height</title>
    <style>
      h2 {
        line-height: 70%;
      }
      p {
        line-height: 1.5;
      }
    </style>
  </head>
  <body>
    <h2>
      Нормальный постулат: алгебра или наибольшее и
      наименьшее значения функции?
    </h2>
    <p>
      Эпсилон окрестность, исключая очевидный случай,
      поддерживает комплексный интеграл по бесконечной
      области.
    </p>
  </body>
</html>

  h2 {
  высота строки: 100%;
}  

  

  Привет 

 мир
  

 

Это первая строка первого абзаца

Это вторая строка

Это третья строка



Это первая строка второго абзаца

Это вторая строка

Это третья строка



Это первая строка третьего абзаца

Это вторая строка

Это третья строка

 

 корпус {
  размер шрифта: 17px;
}

#lвысота1 {
  высота строки: 1;
}

#lвысота2 {
  высота строки: 2;
}
 

 

Это первая строка первого абзаца

Это вторая строка

Это третья строка



Это первая строка второго абзаца

Это вторая строка

Это третья строка



Это первая строка третьего абзаца

Это вторая строка

Это третья строка



Это первая строка четвертого абзаца

Это вторая строка

Это третья строка

 

 корпус {
  размер шрифта: 17px;
}

#lвысота1 {
  высота строки: 5px;
}

#lвысота2 {
  высота строки: 17px;
}

#lвысота3 {
  высота строки: 25 пикселей;
}
 

 

Это первая строка первого абзаца

Это вторая строка

Это третья строка



Это первая строка второго абзаца

Это вторая строка

Это третья строка



Это первая строка третьего абзаца

Это вторая строка

Это третья строка



Это первая строка четвертого абзаца

Это вторая строка

Это третья строка

 

 корпус {
  размер шрифта: 17px;
}

#lвысота1 {
  высота строки: 70%;
}

#lвысота2 {
  высота строки: 100%;
}

#lвысота3 {
  высота строки: 200%;
}