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