Настройка вертикального отступа между элементами списка HTML

Быстрый ответ

Для создания вертикального отступа между элементами списка вы можете воспользоваться свойством CSS margin, применяемым к элементам <li>:

/* Помните слова мудрости от мамы: "Не забывай о пространстве!" */
li { margin-bottom: 10px; }

Этот фрагмент CSS кода обеспечит отступ в 10 пикселей под каждым элементом списка. Пожалуйста, не стесняйтесь корректировать это значение в соответствии с вашими требованиями.

Пропускаем последний отступ: магия псевдо-класса

Наш быстрый ответ эффективно решает проблему, но в некоторых случаях нам не нужен отступ после последнего элемента списка. В этом случае пригодится псевдо-класс CSS :not():

/* Сообщаем последнему элементу: "Ты не такой уж и особенный!" */
li:not(:last-child) { margin-bottom: 10px; }

Еще один вариант – использовать соседний селектор для достижения подобного результата:

/* Исключаем последний элемент из списка */
li + li { margin-top: 10px; }

Помощник в отладке: визуальная граница

В процессе разработки может быть полезно визуализировать размеры отступов. Для этих целей можно добавить временную границу border:

/* Красный – цвет дебаггинга */
li { border: 1px solid red; margin-bottom: 10px; }

Обязательно удаляйте границы, когда отступы будут отточены до идеала.

Интерлиньяж: тихий герой

Свойство line-height также играет важную роль для оценки визуального впечатления от списка. Оно позволяет тонко настраивать расстояние между строками внутри элементов:

/* Как говорят эксперты: "Дайте тексту воздуха" */
li { line-height: 1.6; }

Правильно настроенный line-height в сочетании с отступами margin сделает ваш список более привлекательным визуально.

Визуализация

Давайте визуализируем, как работает margin между элементами списка:

Элемент 1 🚶‍♂️ 
|
10px отступ
|
Элемент 2 🚶‍♂️  
|
Еще 10px отступ
|
Элемент 3 🚶‍♂️

Символ | здесь представляет вертикальное пространство, которое контролируется margin и обеспечивает плавное "восприятие" списка.

Совместимость с устаревшими браузерами: учитываем старое

Если вам приходится работать со старыми браузерами, может потребоваться использовать JavaScript как альтернативный вариант:

/* Когда CSS слишком нов для старых браузеров */
if ( /* условие проверки старого браузера */ ) {
  var listItems = document.querySelectorAll('li');
  for (var i = 0; i < listItems.length – 1; i++) {
    listItems[i].style.marginBottom = '10px';
    /* Где наш надежный JavaScript? */
  }
}

Однако, всегда старайтесь достигать нужного результата с помощью CSS, оставляя JavaScript для решения других задач.

Пространство после списка: важно для гармонии

Не забудьте учесть пространство после списка – это поможет тексту и дизайну эффективно взаимодействовать друг с другом.

/* И в заключение... время расслабиться! */
ul { margin-bottom: 20px; }

Сбалансированные отступы способны создать приятный визуальный ритм в вашем контенте.

Полезные материалы

1. CSS Margin — Погрузитесь в тему создания пространства вокруг элементов.
2. CSS Padding — Изучите все нюансы внутренних отступов элементов.
3. list-style – CSS: Cascading Style Sheets | MDN — Все об стилизации списков в CSS.
4. list-style | CSS-Tricks – CSS-Tricks — Практическое руководство по управлению внешним видом списков.
5. The box model – Learn web development | MDN — Понимание модели коробки в CSS.
6. Rendering performance | Articles | web.dev — Повышение производительности CSS.