Значение правильного интервала между строками (line height)

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

Свойство "line-height" позволяет определить высоту строки текста, задавая отступы сверху и снизу каждой строки в блоке. Значение этого свойства может быть задано в пикселях, процентах или относительных единицах измерения, таких как "em" или "rem". Этот параметр, кроме указания числового значения, может также принимать ключевые слова, такие как "normal".

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

Для примера, предположим, у нас есть следующий HTML код:

<div class="text-block">
  <p>Пример текста с разными значениями line-height.</p>
  <p>Первый параграф с line-height равным 1.5:</p>
  <p class="line15">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Второй параграф с line-height равным 2:</p>
  <p class="line2">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Третий параграф со значением по умолчанию:</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Затем мы можем добавить следующие стили CSS:

.text-block p {
  margin-bottom: 10px;
}

.line15 {
  line-height: 1.5;
}

.line2 {
  line-height: 2;
}

В результате, первый параграф будет иметь высоту строки, равную 1.5, второй параграф - высоту строки, равную 2, а третий параграф будет использовать значение по умолчанию.

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

.line15 {
  line-height: 1.5em;
}

.line2 {
  line-height: 200%;
}

Такой подход позволяет создать пропорциональную высоту строки, основанную на размере шрифта.

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