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

Вертикальное расстояние между пунктами списка можно задать двумя способами. Первый, самый простой — добавить к селектору li свойство margin-bottom, которое задаёт отступ снизу для каждого элемента <li> (пример 1). В качестве значения можно использовать пиксели, em, rem и другие единицы.

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
  <style>
   li {
    margin-bottom: 1em; /* Расстояние снизу */
   }
  </style>
 </head>
 <body>
  <p>Работа со временем</p>
  <ul>
   <li>создание пунктуальности (никогда не будете никуда опаздывать);</li>
   <li>излечение от пунктуальности (никогда никуда не будете торопиться);</li>
   <li>изменение восприятия времени и часов.</li>
  </ul>
 </body>
</html>

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

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

Рис. 1. Расстояние между пунктами списка

Второй способ следующий — для селектора li добавляем свойство line-height, значение в виде дробного числа подбираем самостоятельно. В примере 2 используется значение 1.8.

Пример 2. Использование line-height

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Список</title>
  <style>
   li {
    line-height: 1.8; /* Межстрочное расстояние */
   }
  </style>
 </head>
 <body>
  <p>Работа со временем</p>
  <ul>
   <li>создание пунктуальности (никогда не будете никуда опаздывать);</li>
   <li>излечение от пунктуальности (никогда никуда не будете торопиться);</li>
   <li>изменение восприятия времени и часов.</li>
  </ul>
 </body>
</html>

Этот способ менее универсален, поскольку line-height воздействует на все строки. Вид списка зависит от переносов строк; если переносов нет, то мы получим результат, показанный на рис. 2. Если в тексте имеются переносы, то получим результат как на рис. 3.

Межстрочное расстояние

Рис. 2. Межстрочное расстояние

Межстрочное расстояние при переносе строк

Рис. 3. Межстрочное расстояние при переносе строк

Автор и редакторы

Автор: Влад Мержевич
Последнее изменение: 02.10.2018
Редакторы: Влад Мержевич