Регулировка отступа между маркером и элементом <li> в CSS

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

Для того чтобы изменять расстояние между маркером и элементом <li>, примените CSS свойство padding. Если вам нужно чтобы маркеры располагались в одной линии с текстом и не выходили за рамки блока, задайте list-style-position: inside; для элемента <ul>. Для настройки внутреннего отступа слева в <li>, укажите значение padding-left:

ul {
  list-style-position: inside;
}

li {
  padding-left: 20px; // это свойство контролирует расстояние между маркером и текстом
}

<ul>
  <li>Первоклассный элемент</li>
  <li>Элемент высокого качества</li>
  <li>Элемент, заслуживающий внимания</li>
</ul>

Значение 20px можно настроить по своему усмотрению.

Мастер-класс для охотников за маркерами

Магия псевдоэлементов: создаем собственные маркеры с помощью ::before

ul {
  list-style-type: none; // деактивируем стандартные маркеры
}

li::before {
  content: "•"; // выбираем символ маркера на своё усмотрение 
  color: black; // выбираем цвет маркера, соответствующий стилю списка
  display: inline-block;
  width: 1em; 
  margin-left: -1em; // приближаем маркер к тексту
}

li {
  padding-left: 0; // отключаем внутренние отступы и подчеркиваем маркер
}

Подробнее об этом расскажет наш спикер на видео

Трюк с переносом текста

Для реализации гибкого многострочного текста, который не сливается с маркерами, используйте следующий подход:

li span {
  position: relative;
  left: 20px; // устанавливаем достаточное расстояние до маркера
}

<ul>
  <li><span>Если маркер и текст расположены рядом, между ними должно быть некоторое пространство.</span></li>
</ul>

Обновляем вид маркера

Составьте маркер, который идеально подойдёт под ваш стиль:

li {
  background-image: url('your-face.png'); // задаем свою картинку вместо маркера
  background-repeat: no-repeat;
  background-position: left;
  padding-left: 40px; // создаем пространство, чтобы маркер был виден
}

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

Внизу приведен элемент <li> с внутренним отступом для маркера, это классический текстовый пропуск:

Маркер:      [🔘]
Пространство:       [       ]
Текст:        [Вот так текст соотносится с маркером]

Внутренний отступ padding-left обеспечивает ненавязчивое "приватное пространство":

li {
  padding-left: 20px; // мы сохраняем комфортное расстояние
}

Результат:
До: [🔘Вот так текст соотносится с маркером]
После:  [🔘       Вот так текст соотносится с маркером]

Разбираем сложные моменты

Работа с вложенными списками

В случае с вложенными списками <ul> или <ol>, вот пример их оформления:

ul ul { // подмножество элементов списка, требующее особого подхода
  padding-left: 30px; // увеличиваем внутренний отступ
}

ul ul li {
  padding-left: 15px; // добавочное пространство для каждого внутреннего элемента
}

Поддержка браузерами

Столкнулись с проблемами совместимости браузеров? Имейте в виду, что не все браузеры обрабатывают псевдоэлементы одинаково, поэтому обязательно протестируйте конечную реализацию в разных окружениях.

Единообразие в CSS

Независимо от выбранного вами стиля, единообразие – ключ к хорошему дизайну. Избегайте элементов списка, которые выглядят неуместно или отвлекающе. Стремитесь к чистому и элегантному оформлению.

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

1. W3Schools CSS List Tutorial — освойте основы CSS.
2. TutorialsPoint: CSS – Lists — ищете учебные материалы? У нас их полно!
3. Codrops CSS Reference: Lists — все, что вам нужно знать о стилях списков, разобрано до мелочей!
4. Keegan Street: Specificity Calculator — без инструментов никуда, ведь они нужны не только для расчетов!
5. Accessible List Bullets with CSS ::before — создавайте доступные списки, ведь каждый заслуживает доступа к информации!