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