Списки в CSS: устранение стандартных отступов, маркеры, стилизация

Вступление: Почему списки в CSS — это мощно 🔥

Списки в HTML — это не просто перечисления. С их помощью можно создавать меню, галереи, табы и даже сложные интерфейсы! Но стандартный вид списков (<ul>, <ol>) часто мешает дизайну. Давайте научимся полностью контролировать их внешний вид.

1. Убираем стандартные отступы и маркеры 🧹

По умолчанию браузеры добавляют:

Левый отступ (padding-left или margin-left)
Маркеры (точки, цифры)

Как это исправить?
Просто сбросим стили:

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none; /* Убираем маркеры */
}

💡 Важно! Если нужно оставить маркеры, но убрать отступы — используйте padding-left: 0 и кастомные list-style-position.

2. Кастомные маркеры: от иконок до эмодзи ✨

Стандартные точки скучны. Давайте оживим списки!

Вариант 1: Встроенные стили маркеров

ul {
  list-style-type: square; /* Квадраты */
}

ol {
  list-style-type: upper-roman; /* Римские цифры */
}

Вариант 2: Свои иконки через `::before`

ul.custom-markers li::before {
  content: "→ "; /* Стрелка */
  color: #ff6b6b;
  margin-right: 8px;
}

🎨 Профессиональный приём: Используйте SVG в content для векторных маркеров!

3. Горизонтальные списки → меню 🍔

Превратим вертикальный список в горизонтальное меню:

.nav-list {
  display: flex;
  gap: 20px; /* Пространство между пунктами */
}

.nav-list li {
  padding: 10px 15px;
  background: #f0f0f0;
  border-radius: 4px;
}

⚠️ Осторожно! Для сложных меню лучше использовать display: inline-block с контролем пробелов.

4. Стилизация вложенных списков 🌳

Вложенные списки (ul ul) часто ломают вёрстку. Фиксим:

ul {
  padding-left: 1em; /* Отступ для уровня */
}

ul ul {
  margin-top: 5px; /* Дополнительный отступ */
}

ul li {
  position: relative; /* Для сложных маркеров */
}

5. Креативные примеры для вдохновения 🎨

Анимированные маркеры

ul.animated li::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #4ecdc4;
  margin-right: 10px;
  transform: scale(0);
  transition: transform 0.3s ease;
}

ul.animated li:hover::before {
  transform: scale(1.2);
}

Список-галерея

.image-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 15px;
}

.image-list li {
  border: 1px solid #eee;
  padding: 10px;
}

Итог: Списки — ваш новый супер-инструмент 🦸‍♂️

Теперь вы умеете:

Полностью контролировать отступы
Создавать уникальные маркеры
Строить меню любой сложности
Анимировать и стилизовать списки как профи