Как убрать отступы у пунктов неупорядоченного списка HTML

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

Чтобы убрать отступы у элементов списка, задайте свойствам padding-left: 0 и list-style: none; в CSS:

ul {
  padding-left: 0;
  list-style: none;
}

Примените указанные выше стили к HTML-списку:

<ul>
    <li>Здесь без отступов</li>
    <li>И здесь также применены, вплотную к левому краю</li>
</ul>

Борьба с привидениями прошлого браузера

Если возникла проблема с горизонтальной прокруткой в старых браузерах, как IE 8, то применение свойства margin-left поможет исправить ситуацию:

ul {
  list-style: none;  // Отменяем стандартные маркеры
  margin-left: 0;    // Сдвигаем список к левому краю
}

Управление маркерами с помощью CSS позиционирования

Если вы хотите сохранить маркеры, но при этом удалить отступы, используйте list-style-position: inside; сочетая его с обнуление отступов:

ul {
  list-style-position: inside; // В этом случае маркеры располагаются внутри строки
  padding-left: 0;
}

Таким образом, маркеры останутся в потоке контента и не будут нарушать его общую структуру.

Расшифровка специфичности CSS

Если применённые вами стили не работают в ожидаемом порядке, проверьте специфичность CSS-селекторов. Убедитесь, что они достаточно точно определены, чтобы переопределить стандартные стили браузера.

Магический трюк сброса CSS

Для обеспечения единообразия стилей в разных браузерах используйте глобальный сброс стилей CSS (CSS reset) или normalize.css. Это создаст чистую базу для ваших стилей списков:

/* CSS Reset */
ul, li {
  margin: 0;       // Отменяем отступы
  padding: 0;      // Удаляем поля
  list-style: none; // Стандартизируем стиль для всех элементов списка
}

Выравнивание текста элементов списка

При настройке отступов списка следует соблюдать гармоничное выравнивание текста в элементах <li>:

li {
  /* Выравнивание текста должно соответствовать общей композиции текста */
}

Экспериментируйте с разными комбинациями margin, padding и text-indent.

Недостатки отрицательных значений

Отрицательный text-indent может привести к проблемам с доступностью контента и нежелательным эффектам на различных устройствах.

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

Представьте себе мир, где все элементы списка идеально выровнены и беспопечны:

До:             После:
➡️📕                📕
  ➡️📗              📗
    ➡️📘            📘

С заданными CSS свойствами (text-indent: 0;), данный порядок может стать реальностью, как на полке библиотеки.

Продвинутое форматирование

Нестандартные свойства display

Изменение свойства display у элементов <li> может удалить отступы, а с ними и маркеры:

li {
  display: table-row; // Элементы как строки таблицы – беспопечны и без маркеров
}

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

Консистенция вложенных списков

При работе с вложенными списками учтите стилевую целостность:

ul ul { /* Здесь должны определяться стили для вложенных списков */ }

Контексты форматирования блоков

Создание нового контекста форматирования блоков может повлиять на отступы:

ul {
  overflow: hidden; // Останавливаем поток, фиксируем элементы на месте
}

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

1. list-style – CSS: Каскадные таблицы стилей | MDN — Детальная документация по свойству CSS list-style.
2. Стилизация списков в CSS – W3Schools — Руководство по стилизации списков в CSS.
3. padding | CSS-Tricks – CSS-Tricks — Техники для управления отступами, влияющие на отступы списка.
4. HTMLElement: свойство style – Веб API | MDN — Информация о использовании inline стилей в HTML для прямого воздействия на отступы списка.
5. CSS Box Model | CSS-Tricks – CSS-Tricks — О "модели коробки", применяемой к элементам списка.
6. Специфичность CSS: Вещи, которые вам следует знать — Smashing Magazine — Пояснение принципов специфичности CSS, что является критически важным для переопределения стандартных стилей списка.
7. Normalize.css: заставьте браузеры отображать все элементы более последовательно — Использование Normalize.css для унификации стандартных стилей списков.