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

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