Свойство CSS line-height

Свойство CSS line-height отвечает за расстояние между строками. Иногда это свойство называют интерлиньяжем.

Синтаксис CSS line-height

...
line-height: value;
...

Где value может принимать

  • normal – константа, которая означает стандартное межстрочное расстояние
  • Простые вещественные значения (1.0, 0.4, 1.3 – это коэффициент множителя относительно стандартного расстояния между строками)
  • Значение в пикселях (1px, 20px)
  • Значение в пунктах pt (1.0pt, 1.2pt)
  • Значение в единицах em (0.5em, 0.2em)
  • Значение в процентах

Примечание

В зависимости от шрифта и его размера межстрочный интервал разный. В Microsoft установили стандарт: line-height:1.2em

Межстрочный интервал CSS на сайте html

Пример. Различные варианты задания межстрочного интервала

<html>
<head>
<style>
.primer1{
line-height: 1.0;
}
.primer2{
line-height: 0.5;
}
.primer3{
line-height: 2.0;
}
.primer4{
line-height: 12px;
}
</style>
</head>
<body>
<p class="primer1">Пример 1. Какой-то текст line-height:1.0
<br/>Какой-то текст</p>
<p class="primer2">Пример 2. Какой-то текст line-height:0.5
<br/>Какой-то текст</p>
<p class="primer3">Пример 3. Какой-то текст line-height:2.0
<br/>Какой-то текст</p>
<p class="primer4">Пример 4. Какой-то текст line-height:12px
<br/>Какой-то текст</p>
</body>
</html>

На странице преобразуется в следующее


Пример 1. Какой-то текст. line-height:1.0

Какой-то текст

Пример 2. Какой-то текст. line-height:0.5

Какой-то текст

Пример 3. Какой-то текст. line-height:2.0

Какой-то текст

Пример 4. Какой-то текст. line-height:12px

Какой-то текст

Какое межстрочный интервал лучше выбрать

Лучшие выбирать относительные интервалы от 1.5 до 2.5 (или в процентах 150%..250%). При таком интервале текст лучше читается, а интервал привязан к размеру шрифта.

Для обращения к line-height из JavaScript нужно писать следующую конструкцию:

[window.]document.getElementById("elementID").style.lineHeight="VALUE"




Читайте также:

• z-index

• letter-spacing

• Линейный градиент

• Радиальный градиент

• Как сделать рамку элементов border

• Как сделать фон на сайте html

• Как сделать анимацию в html

• CSS position – примеры


← Перейти в каталог CSS уроков

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.