Как сделать внутренний отступ маркера от списка?

Рейтинг: 0Ответов: 1Опубликовано: 26.01.2023

Есть список, там нужно увеличить расстояние от маркера до пункта. Не могу понять, как это сделать. По дефолту list-style-position: outside и я всегда увеличивал расстояние через padding. Но здесь принципиально важно сделать list-style-position: inside. padding тогда не работает. Не могу понять, как сделать это

Упрощённый кусок кода:

li {
  background-color: pink;
  list-style-position: inside;
}
<ul>
  <li>Пункт 1</li>
</ul>

css html
Источник: Stack Overflow на русском

Ответы

▲ 1Принят

Вот как бы это реализовал я:

li {
  background-color: pink;
  list-style-position: inside;

  list-style: none;
  position: relative;

  --marker-size: 5px;
  --gap-right: 5px;
  --gap-left: 5px;

  padding-left: calc(var(--marker-size) * 2 + var(--gap-right) + var(--gap-left));
}

li::before {
  content: '';
  width: var(--marker-size);
  height: var(--marker-size);
  background-color: rgb(0, 0, 0);
  display: inline-block;
  border-radius: 50%;
  position: absolute;
  top: calc(50% - calc(var(--marker-size) / 2));
  left: calc(var(--marker-size) / 2 + var(--gap-left));
}
<ul>
    <li>Пункт 1</li>
</ul>

Как поменять размер маркера?

За это отвечает пропорция --marker-size, там вы указываете размер маркера, а уже сами стили правильно располагают его.

Как мне регулировать расстояние между маркером и пунктом?

Чтобы регулировать расстояние между маркером и пунктом нужно изменять пропорцию --gap-right, она отвечает за расстояние которое добавляется с правой стороны.

Чтобы отрегулировать расстояние слева, меняйте пропорцию --gap-left, она отвечает за расстояние которое добавляется с левой стороны.