Содержание

line-height | CSS | WebReference

Для блочных элементов определяет минимальную высоту строки текста. Для внедряемых строчных элементов (вроде <img>) свойство line-height не оказывает никакого эффекта. Для остальных строчных элементов line-height задаёт высоту, которая используется для расчёта высоты строки блока.

Краткая информация

Значение по умолчанию normal
Наследуется Да
Применяется Ко всем элементам
Анимируется Да

Синтаксис

line-height: <множитель> | <размер> | <проценты> | normal

Обозначения

Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#

Значения

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пиксели (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берётся высота шрифта.

normal
Расстояние между строк вычисляется автоматически.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

<!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>

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства line-height

Объектная модель

Объект.style.lineHeight

Примечание

Internet Explorer до версии 7.0 неправильно вычисляет высоту строк для изображений и элементов форм.

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 02.03.2020

Редакторы: Влад Мержевич

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, но проблема заключается в том, что

font-size: 100px выглядит по разному, в зависимости от семейства шрифта. Вопрос: значение line-height всегда одинаковое или разное? Действительно ли значение варьируется между 1 и 1.2? А vertical-align? Каково его влияние в отношении line-height?

Глубокое погружение в 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 имеют одинаковую высоту

Посмотрите результат на JSBin

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

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

Выводы

  • 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 и вещь без единицы, но какой смысл это приобретает?

css
Поделиться Источник freddiefujiwara     16 июня 2009 в 09:22

6 ответов


  • Разве «line-height: normal;»-плохая идея?

    Я наблюдал некоторое довольно непоследовательное поведение рендеринга страницы HTML, когда свойство CSS line-height имеет значение normal . Я также нашел сообщение в блоге Эрика Мейера , где обсуждаются различные несоответствия line-height: normal; , вот только одна цитата: Вот кульминационный…

  • Понимание свойства css line-height

    Я играл со свойством line-height со следующего сайта: http://www.w3schools.com/css/ tryit.АСП?именем=trycss_float6 div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%; } Я попытался понять, что такое высота линии, и прочитал это: В элементах уровня блока свойство…



38

Возможные значения

номер :

Задает число, которое будет умножено на текущий размер шрифта, чтобы установить расстояние между строками

длина :

Устанавливает фиксированное расстояние между линиями

% :

Задает расстояние между строками в % от текущего размера шрифта

взять из http://www.w3schools.com/css/ pr_dim_line-height.asp

Поделиться Haim Evgi     16 июня 2009 в 09:27



8

Похоже, что line-height не нуждается в единице измерения (подробная статья) .

Свойство line-height может принимать значения безразмерных чисел. Вы также можете указать объединенные значения высоты строки, хотя обычно этого делать не следует. Но безразмерные числа вполне подходят для этого свойства.

Поделиться instanceof me     16 июня 2009 в 09:27



8

Также обратите внимание: «1» не равно «normal» — 1 точно такая же высота, как размер шрифта, поэтому строки в многострочном элементе, таком как абзац, будут плотно прилегать друг к другу, в то время как normal добавляет ожидаемый интервал между строками.

Использование сокращенного шрифта:

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;
}

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

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

сохранит высоту строки 1 (которая в этом примере будет равна 14px).

Поделиться George Langley     21 января 2013 в 19:31



6

В соответствии с w3schools и w3.org line-height:1; является допустимым и означает следующее: Устанавливает число, которое будет умножено на текущий размер шрифта, чтобы установить расстояние между строками.

Поделиться merkuro     16 июня 2009 в 09:28



3

Если единица измерения не указана, например "line-height: 1.5" , расстояние между строками устанавливается как это число, умноженное на текущий размер шрифта.

1.5 x размер шрифта

Поделиться jitter     16 июня 2009 в 09:27



1

Это кратно размеру шрифта. Из рекомендации кандидата CSS 2.1: »Используемое значение свойства-это число, умноженное на размер шрифта элемента.«

Поделиться Joey     16 июня 2009 в 09:29


Похожие вопросы:


Что такое $1 в Perl?

Что такое $1 ? Заключается в том, что матч нашли для (\d+) ? $line =~ /^(\d+)\s/; next if(!defined($1) ) ; $paperAnnot{$1} = $line;


CSS атрибут line-height

Не мог бы кто-нибудь объяснить атрибут CSS line-height? Похоже, он единственный, кого я не знаю.


‘Line-height: 1’ в CSS reset вызывает расширение фона HTML

Я пытался понять, почему в нижней части моего макета есть тонкая (может быть, 1px) линия, и наконец точно определил body {line-height: 1;} в файле сброса Эрика Мейера. По какой-то причине эта…


Разве «line-height: normal;»-плохая идея?

Я наблюдал некоторое довольно непоследовательное поведение рендеринга страницы HTML, когда свойство CSS line-height имеет значение normal . Я также нашел сообщение в блоге Эрика Мейера , где…


Понимание свойства css line-height

Я играл со свойством line-height со следующего сайта: http://www.w3schools.com/css/ tryit.АСП?именем=trycss_float6 div.container { width:100%; margin:0px; border:1px solid gray; line-height:150%; }…


преимущества unitless line height вместо rem line-height

Я смотрю на то, чтобы переключить свою настройку line-height с rem based на unitless. Я пытаюсь понять, почему я должен это делать, какие преимущества заключаются в том, чтобы оставаться с rems,…


CSS :: перед псевдо-элементом line-height?

Мой абзац имеет height/line-height 50px и text-align: center , который центрирует текст. Но p:before заставляет его увеличиваться в height/line-height, заставляя текст падать вниз. Я хочу, чтобы и…


Может ли использование line-height < 1 вызвать проблемы?

Я использую определенный шрифт (размер шрифта: 16px). Когда я использую line-height:1 , базовая линия персонажа не располагается внизу. Существует разрыв в 2px: Если я уменьшу высоту линии до 0.75,…


является ли line-height:1 эквивалентным 100%?

Пожалуйста, сначала взгляните на следующие фрагменты: body { line-height: 1; } <h2> Hello <br> world </h2> body { line-height: 100%; } <h2> Hello <br> world </h2>…


Контрольная высота / line-height of:: selection tint

Эстетический вопрос для веб-дизайнеров: Я создаю систему проектирования. Я хочу контролировать как color , так и height и / или line-height из ::selection . Я проверил очевидное: ::-moz-selection {…

height | HTML и CSS с примерами кода

Свойство line-height для блочных элементов определяет минимальную высоту строки текста.

Для внедряемых строчных элементов (вроде <img>) свойство line-height не оказывает никакого эффекта.

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

Шрифт и Цвет

Синтаксис

/* 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;

Значения

Любое число больше нуля воспринимается как множитель от размера шрифта текущего текста. Например, значение 1.5 устанавливает полуторный межстрочный интервал. В качестве значений принимаются также любые единицы длины, принятые в CSS — пиксели (px), дюймы (in), пункты (pt) и др. Разрешается использовать процентную запись, в этом случае за 100% берётся высота шрифта.

normal
Расстояние между строк вычисляется автоматически.

Значение по-умолчанию:

Применяется ко всем элементам

Спецификации

Описание и примеры

<!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>

Обзор свойства line-height в CSS-стилях

С помощью свойства line-height в CSS устанавливается величина пространства между строками. В блочных элементах свойство влияет на минимальную высоту строк внутри элемента. Для встроенных элементов это свойство влияет на высоту, которая используется для вычисления высоты коробки (блока) строки.

Но, прежде чем мы начнем рассматривать свойство line-height более детально, мы должны дать пояснение двум важным моментам: область содержимого элемента (content-area) и коробка строки (line-box).

 

Область содержимого элемента (content-area) – это вычисленная высота области содержимого элемента. На размер области содержимого влияют такие свойства, как box-sizing, width, min-width, max-width, height, min-height и max-height. Вы можете представить себе область содержимого как область, которая содержит текст или графические элементы, для которых суммируются все вышеуказанные свойства.

Коробка строки (line-box). Каждая строка состоит из одного или нескольких встроенных элементов (HTML-тегов). Высота коробки строки зависит от высоты своих потомков. Браузер вычисляет высоту для каждого встроенного элемента и, следовательно, высоту строки (от самой высокой точки ее потомка до самой нижней точки ее потомка). Поэтому, коробка строки всегда имеет достаточную высоту, чтобы вместить все ее дочерние элементы (по умолчанию). Каждый элемент HTML представляет из себя набор таких «коробок». Если вы знаете высоту каждой коробки строки, тогда вы будете знать высоту этого элемента.

 

И одним из свойств, которые влияют на высоту коробки строки, является line-height (т.е., высота строки). Поскольку высота строки может быть выше высоты области содержимого, представьте себе свойство line-height как свойство, которое определяет виртуальную высоту элемента. Виртуальную, поскольку пространство, которое выше области содержимого, является невидимым.

Графически это можно представить так:

 

Высота области содержимого, кроме прочего, определяется размером шрифта.

Высота, определенная в line-height, используется для вычисления высоты строки и коробки строки.

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

Исходя из общего вычисленного значения, высота строки (виртуальная область) может быть равной, большей или меньшей, чем область содержимого. Если значение высоты строки меньше, тогда направляющая имеет отрицательное значение, а коробка строки становится визуально меньше своих дочерних элементов.

 

Встроенные элементы, на которые влияют эти правила:

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

Для этих конкретных встроенных элементов высота вычисляется на основе их значений height, margin и border. Если значение для height установлено в auto, тогда используется line-height, а область содержимого становится строго равной высоте строки.

 

 

Теперь осталось разобраться с проблемой, каково должно быть нормальное значение line-height? Не рекомендуется использовать line-height: 1; поскольку единичные значения (безразмерные) являются относительными по размеру шрифта, а не относительными по отношению к области содержимого. И очень часто это приводит к тому, что высота строки (виртуальная область) будет меньшей за область содержимого.

 

Если проанализировать шрифты из Google Web Fonts, то мы увидим, что более 90% из них имеют высоту строки (line-height) больше, чем 1. Поэтому, желательно использовать немного большие значения за 1.

 

Дополнительные сведения о вычислении коробки строки:

  • для встроенных элементов, padding и border увеличивают область фона, но не высоту области содержимого (и не высоту коробки строки). Поэтому область содержимого не всегда такова, какой она выглядит на экране. Свойства margin-top и margin-bottom не имеют влияния.
  • для замененных встроенных элементов (<img>, <input>, <svg> и т. д.), блоков с inline-block: padding, margin и border увеличивают height, а значит и высоту области содержимого и высоту коробки строки.

 

 

  • 2821