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

Вертикальное расстояние между пунктами списка можно задать двумя способами. Первый, самый простой — добавить к селектору 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. Межстрочное расстояние при переносе строк

Автор: Влад Мержевич
Источник webref.ru