Полуторный межстрочный интервал css

line-height¶

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

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

Демо¶

• font
• font-family
• font-feature-settings
• font-kerning
• font-language-override
• font-optical-sizing
• font-size
• font-size-adjust
• font-stretch
• font-style
• font-synthesis
• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• font-variant-position
• font-variation-settings
• font-weight
• line-height

Синтаксис¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

/* Keyword value */ line-height: normal; /* Unitless values: use this number multiplied by the element's font size */ line-height: 3.5; /* values */ line-height: 3em; /* values */ line-height: 34%; /* Global values */ line-height: inherit; line-height: initial; line-height: unset; 

Значения¶

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

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

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

Источник

line — height

line — height задаёт интервал между строчками текста, который называют интерлиньяж.

Примеры

Скопировать ссылку «Примеры» Скопировано

 .selector  line-height: normal;> .selector  line-height: normal; >    Скопировать Скопировано Не удалось скопировать   

Множитель — расстояние будет в 3.5 раза больше, чем размер текста:

 .selector  line-height: 3.5;> .selector  line-height: 3.5; >    Скопировать Скопировано Не удалось скопировать   

Условные единицы — значение, относительно стандартного интервала.
В данном случае, интервал будет в 3 раза больше интервала родительского элемента.

 .selector  line-height: 3em;> .selector  line-height: 3em; >    Скопировать Скопировано Не удалось скопировать   

Проценты — размер интервала высчитывается относительно размера шрифта:

 .selector  line-height: 34%;> .selector  line-height: 34%; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

С помощью line — height можно выбрать, насколько большое расстояние будет между строчками текста. Обычно это расстояние немного больше, чем высота шрифта.

Браузеры понимают line — height по-своему: как высоту контейнера строки. Символы внутри образуют область контента, а участки между этой областью и границей контейнера и есть интерлиньяж. Такая особенность может легко запутать, ведь обычно расстояние между строчками измеряется по базовым линиям текста.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Задать свойство line — height можно одним из нескольких значений. Самый предсказуемый вариант — с помощью числа. У свойства line — height не может быть отрицательного значения.

• normal — значение по умолчанию. Немного отличается в разных браузерах, но, как правило, равно 1.2. Это значит, что расстояние между строчками будет равно размеру шрифта font — family , помноженному на 1.2.
• число — число без единиц измерения. Например, значение 1.5 значит, что высота строчки будет равна размеру шрифта font — family , помноженному на 1.5.
• длина — например, пиксели px , условные единицы шрифта em , дюймы in , пункты pt и так далее.
• проценты — например, line — height : 120 % . За 100% берётся размера шрифта font — size .

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

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

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Самый надёжный способ задать интервал между строчками — с помощью числа, например, 1.5. При увеличении масштаба страницы этот интервал увеличится соответствующим образом.

💡 Для обычного текста чаще всего используют полуторный интервал line — height : 1 . 5 . С таким интервалом текст удобнее читать.

💡 Ещё один способ задать интервал между строк — шорткат font . При этом обязательно сразу указать семейство шрифтов font — family . Например:

 div  font: 10px/1.2 Georgia, "Bitstream Charter", serif;> div  font: 10px/1.2 Georgia, "Bitstream Charter", serif; >    Скопировать Скопировано Не удалось скопировать   

Ещё примеры

Скопировать ссылку «Ещё примеры» Скопировано

Попробуем задать одно и то же расстояние между строчками с помощью разных значений. Каждое значение будет умножаться на размер шрифта font — size :

 div  line-height: 1.2; font-size: 10px;> div  line-height: 1.2; font-size: 10px; >    Скопировать Скопировано Не удалось скопировать   

 div  line-height: 1.2em; font-size: 10px;> div  line-height: 1.2em; font-size: 10px; >    Скопировать Скопировано Не удалось скопировать   

 div  line-height: 120%; font-size: 10px;> div  line-height: 120%; font-size: 10px; >    Скопировать Скопировано Не удалось скопировать   

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

Спойлер: простое число умножается на высоту шрифта того же элемента, а, например, значение em — на высоту шрифта родительского элемента:

   
Тут мы задали интервал с помощью числа 1.2 Оно умножается на размер шрифта этого же элемента. Это удобно и предсказуемо.   
А здесь мы ввели 1.2em Это значит, что 1.2 умножается на размер шрифта родительского элемента, в нашем случае 
, а не на размер заголовка. Это вносит путаницу.  div class="box box_green"> h1>Тут мы задали интервал с помощью числа 1.2h1> Оно умножается на размер шрифта этого же элемента. Это удобно и предсказуемо. div> div class="box box_blue"> h1>А здесь мы ввели 1.2emh1> Это значит, что 1.2 умножается на размер шрифта родительского элемента, в нашем случае div>, а не на размер заголовка. Это вносит путаницу.div> div>    Скопировать Скопировано Не удалось скопировать   

 h1  font-size: 30px;> .box  width: 18em; padding: 20px; display: inline-block; vertical-align: top; font-size: 15px;> .box_green  line-height: 1.2; background-color: #49a16c;> .box_blue  line-height: 1.2em; background-color: #1a5ad7;> h1  font-size: 30px; > .box  width: 18em; padding: 20px; display: inline-block; vertical-align: top; font-size: 15px; > .box_green  line-height: 1.2; background-color: #49a16c; > .box_blue  line-height: 1.2em; background-color: #1a5ad7; >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Если при вёрстке макета вы видите в графическом редакторе межстрочное расстояние, заданное в пикселях, то не стоит переносить его в точности. В случае, если размер шрифта элемента изменится, то абсолютно заданное межстрочное расстояние не подстроится. А хотелось бы больше гибкости.

Используй следующую функцию для расчёта относительного интерлиньяжа:

line height / font size = относительный line-height

Если размер шрифта в Фотошопе равен 58px, а межстрочное расстояние — 86px, то результат будет таким:

При округлении получим значение 1 . 5 .

🛠 Если в Фотошопе интерлиньяж не указан (пустое поле), то он равен стандартному значению — 120%. Что аналогично 1.2 для вёрстки.

Источник

Как задать межстрочный интервал в CSS и HTML?

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

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

Навигация по статье:

Как задать межстрочный интервал CSS?

Для задания межстрочного интервала в CSS существует специальное свойство line-height. Дословно оно переводится как высота строки.
Это CSS-свойство может принимать несколько значений:

1. Множитель (число). Например:

Лично мне больше всего нравится первый способ. Так как он прост и понятен в использовании и при этом интервал сохраняется при изменении размера шрифта.

Как задать межстрочный интервал html?

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

1. Использовать атрибут style, внутри которого использовать то же свойство line-height с нужными нам параметрами.
Например:

Использование межстрочного интервала в HTML и CSS для выравнивание по вертикали и задания отступов.

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

Ниже приведён пример заголовка без межстрочного интервала и с ним.

Межстрочный интервал равен 0%

Межстрочный интервал равен 300%

Межстрочный интервал равен 0%

Межстрочный интервал равен 300%

Таким образом, при помощи данного CSS свойства вы можете изменять межстрочный интервал в HTML и CSS коде, и таким образом делать оформление ваших сайтов более привлекательным.

Спасибо что дочитали статью до конца! Если она была для вас полезной, то обязательно поделитесь ею в соцсетях. Так вы поможете мне в продвижении моего проекта.

Желаю вам успехов в оформлении ваших сайтов! До встречи в следующих статьях!

С уважением Юлия Гусарь

Источник