Перейти к содержанию

Энциклопедия CSS: line-height

Материал из Викижурнал
CSS: color
Энциклопедия CSS: line-height
Энциклопедия CSS: line-height
Тематические порталы
Портал CSS • Портал Веб-разработчиков

Свойство line-height в CSS задаёт высоту строки текста внутри элемента. Оно используется для управления межстрочным интервалом, улучшения читаемости текста и настройки визуального восприятия блоков текста.

Синтаксис

Свойство line-height может принимать следующие значения: 

line-height: значение;

Допустимые значения

line-height поддерживает несколько форматов записи:

Числовые значения

  • Пример: line-height: 1.5;
  • Определяет коэффициент высоты строки относительно размера шрифта элемента. Например, если размер шрифта равен 16px, то line-height: 1.5 установит высоту строки в 24px.

Процентные значения

  • Пример: line-height: 150%;
  • Высота строки рассчитывается как процент от размера шрифта элемента. Например, для шрифта 16px, 150% соответствует высоте строки в 24px.

Значения в фиксированных единицах

  • Пример: line-height: 24px;
  • Указывает фиксированную высоту строки в пикселях, процентах, em или других единицах.

Ключевые слова

  • normal: Устанавливает стандартный межстрочный интервал (по умолчанию). Обычно значение зависит от шрифта и браузера.
  • inherit: Наследует значение от родительского элемента.
  • initial: Устанавливает значение по умолчанию (аналогично normal).
  • unset: Убирает заданное значение и возвращается к значению по умолчанию или наследуемому.

Пример использования

HTML

<body>
    <p class="normal">Текст с нормальной высотой строки.</p>
    <p class="larger">Текст с увеличенным межстрочным интервалом.</p>
    <p class="smaller">Текст с уменьшенным межстрочным интервалом.</p>
    <p class="fixed">Текст с фиксированной высотой строки.</p>
</body>

CSS

p {
    font-size: 16px;
    font-family: Arial, sans-serif;
}

.normal {
    line-height: normal; /* Нормальный межстрочный интервал */
}

.larger {
    line-height: 2; /* Увеличенный коэффициент высоты строки */
}

.smaller {
    line-height: 1; /* Уменьшенный коэффициент высоты строки */
}

.fixed {
    line-height: 24px; /* Фиксированная высота строки */
}

Пример с использованием наследования

Свойство line-height наследуется. Это полезно для установки единого межстрочного интервала на уровне всего документа: 

body {
    font-size: 16px;
    line-height: 1.5; /* Устанавливает стандартный интервал для всего текста */
}

p {
    font-size: 14px; /* Уменьшение размера шрифта */
    /* line-height будет 1.5, так как свойство наследуется */
}

Поддержка браузерами

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

Полезные советы

  • Используйте числовые значения (например, 1.5), чтобы избежать зависимости от абсолютных размеров текста. Это особенно полезно для адаптивного дизайна.
  • Оптимальный межстрочный интервал для читаемости текста обычно находится в диапазоне от 1.4 до 1.6.
  • Избегайте слишком маленького (1 или меньше) или слишком большого (2 и больше) значения, чтобы не ухудшить читаемость текста.

Заключение

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

Другие статьи о CSS

Источник — https://ru.wikijournal.org/w-wiki/index.php?title=Энциклопедия_CSS:_line-height&oldid=13165