CSS Line Height: The Key to Perfecting Your Website's Readability and Design

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

Например, рассмотрим следующий HTML-код:

This is a paragraph of text.

Чтобы задать высоту между строками, добавим следующий CSS-код:

p {
  line-height: 1.5;
}

В данном случае, высота между строками в абзаце будет увеличена до 1.5 раза от размера шрифта. Если же мы зададим значение 2, то высота между строками увеличится в 2 раза.

Также можно задавать значение line-height в процентах, например:

p {
  line-height: 150%;
}

Это значит, что высота между строками будет равна 1.5 от текущего размера шрифта.

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

  
Lorem ipsum dolor sit amet,
  
Button

.container {
  height: 100px;
  display: flex;
  align-items: center;
}
.text {
  line-height: 1.5;
}

Здесь мы задаем контейнеру высоту, а затем с помощью свойства align-items центрируем в нем элементы по вертикали. Абзац текста имеет свойство line-height, которое позволяет задавать высоту между строками, чтобы текст оставался читаемым и не слипался.

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