Как сделать расстояние между строками в css
Перейти к содержимому

Как сделать расстояние между строками в css

  • автор:

Свойство line-height

Свойство line-height устанавливает интервал между строками текста (межстрочный интервал).

Свойство не задает промежуток между строками текста, как могло бы показаться, оно задает высоту линии текста. Это значит, что реальный промежуток между строками будет вычисляться так: line-height — font-size = расстояние между строками текста. Или наоборот line-height = font-size + расстояние между строками текста.

Синтаксис

Значения

Значением свойства служат любые единицы для размеров. При указании значения в % межстрочный интервал будет в процентах от размера шрифта.

Кроме того, можно задать значением любое число больше нуля. В этом случае оно воспринимается как множитель от размера шрифта. Например, если font-size имеет значение 20px , а line-height — 1.5 , то это все равно, что написать line-height: 30px (20px * 1.5 = 30px).

По умолчанию свойство имеет значение normal , в этом случае браузер выбирает межстрочный интервал автоматически.

Пример

В данном примере расстояние между строками текста будет line-height — font-size = 38px — 18px = 20px:

Полезные советы по CSS и HTML

Для управления межстрочным расстоянием (оно еще называется интерлиньяжем) применяется стилевой параметр line-height . В качестве значения обычно указывается число, которое определяет межстрочный интервал. Например, line-height: 2 устанавливает двойной интервал, а line-height: 1.5 — полуторный.

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

Рис. 1. Вид текста при разном межстрочном расстоянии

Аргумент параметра line-height допустимо задавать и в других единицах CSS, например, пикселах (px), процентах (%) и др. В данном примере для первого абзаца установлен полуторный интерлиньяж, а для второго — межстрочное расстояние равно 0.9em, что можно трактовать как 0.9 или 90%, поскольку единица em соответствует высоте текущего шрифта.

Как установить расстояние между ячеек?

Расстояние между ячеек заметно при использовании границ вокруг ячеек или при заливке ячеек цветом, который выделяется на фоне веб-страницы. Для управления расстоянием между ячеек используется стилевое свойство border-spacing. Если задано единственное значение, то оно устанавливает расстоянием между соседними ячейками. Если задать два значения, то первое определяет расстояние по горизонтали (т. е. слева и справа от ячейки), а второе — по вертикали (сверху и снизу).

В примере 1 показано добавление свойства border-spacing к селектору table .

Пример 1. Использование border-spacing

Расстояние между ячеек

Леонардо 5 8
Рафаэль 4 11
Микеланджело 24 9
Донателло 2 13

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

Вид таблицы при использовании border-spacing

Рис. 1. Вид таблицы при использовании border-spacing

При добавлении к селектору table свойства border-collapse со значением collapse , значение border-spacing игнорируется, вид самой таблицы меняется (рис. 2).

Вид таблицы при использовании border-collapse с collapse

Рис. 2. Вид таблицы при использовании border-collapse с collapse

См. также

  • border-collapse
  • border-spacing
  • Оформление таблиц

line-height

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

Интерактивный пример

Синтаксис

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

Свойство line-height задаётся с помощью:

Значения

Зависит от пользовательского браузера. Компьютерные браузеры (включая Firefox) используют значение по умолчанию приблизительно 1.2 , в зависимости от элементов font-family .

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

Формальный синтаксис

line-height =
normal | (en-US)
| (en-US)

=
| (en-US)

Примеры

Basic example

/* All rules below have the same resultant line height */ div  line-height: 1.2; font-size: 10pt; > /* number */ div  line-height: 1.2em; font-size: 10pt; > /* length */ div  line-height: 120%; font-size: 10pt; > /* percentage */ div  font: 10pt/1.2 Georgia, "Bitstream Charter", serif; > /* font shorthand */ 

It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.

Prefer unitless numbers for line-height values

CSS
.green  line-height: 1.1; border: solid limegreen; > .red  line-height: 1.1em; border: solid red; > h1  font-size: 30px; > .box  width: 18em; display: inline-block; vertical-align: top; font-size: 15px; > 
HTML
div class="box green"> h1>Avoid unexpected results by using unitless line-height.h1> length and percentage line-heights have poor inheritance behavior . div> div class="box red"> h1>Avoid unexpected results by using unitless line-height.h1> length and percentage line-heights have poor inheritance behavior . div>  line-height is calculated from its own font-size (30px × 1.1) = 33px -->  line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want --> 
Result

Specifications

Specification
CSS Inline Layout Module Level 3
# line-height-property
Начальное значение normal
Применяется к все элементы. Это также применяется к ::first-letter и ::first-line .
Наследуется да
Проценты относятся к размеру шрифта самого элемента
Обработка значения для процентов и значений длин, абсолютной длины, если другое не указано
Animation type число или длина

Совместимость с браузерами

BCD tables only load in the browser

See also

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

This page was last modified on 6 янв. 2024 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

  • Product help
  • Report an issue

Our communities

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *