Согласованное отступы в списках

Сначала рассмотрим чистый элемент списка, не вложенный в список элементов. При использовании HTML-элемента <li>, браузер устанавливает значение display в list-item. Будут ли элементы списка, не вложенные в список, иметь маркер (иначе известный как "пуля"), зависит от браузера. Мы можем убрать эту пулю с помощью list-style-type: none.

li {
  border: 1px dashed red;
}
li:nth-of-type(n + 4) {
  list-style-type: none;
}

Эта пунктирная красная граница представляет внешние края области содержимого каждого элемента списка. На этом этапе элементы списка не имеют отступов или границ.

Теперь мы обернём их во внешний элемент; в этом случае мы обернём их неупорядоченным списком (т.е., <ul>). Согласно модели CSS-боксов, ящики элементов списка должны отображаться внутри области содержимого родительского элемента.

ul {
  border: 1px dashed blue;
}
li {
  border: 1px dashed red;
  list-style-type: none;
}

Пунктирная синяя граница показывает нам края области содержимого <ul> элемента. Этот родительский элемент имеет и отступ, и отступ. Браузеры устанавливают следующие значения по умолчанию для неупорядоченных списков:

ul {
  /* user-agent styles */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}

Теперь вернём маркеры элементов списка. Поскольку это неупорядоченный список, элементы списка наследуют list-style-type: disc; стили браузера, которые представляют собой заполненные кружки "пули", от своего <ul> родительского элемента.

li {
  border: 1px dashed red;
}
ul {
  border: 1px dotted blue;
}
ul:last-of-type {
  list-style-position: inside;
}

Визуально, маркеры находятся вне области содержимого <ul>, но это не главное здесь. Важно то, что маркеры размещаются вне "главного блока" элементов <li>, а не <ul>. Они похожи на придатки к элементам списка, свисающие за пределами области содержимого <li>, но все еще прикрепленные к <li>.

Вот почему во всех современных браузерах маркеры размещаются за пределами любой границы, заданной для элемента <li>, когда значение list-style-position по умолчанию или явно установлено на outside. Когда мы изменили его на inside, маркеры были перемещены внутрь области содержимого <li>, как будто они являются строчным блоком, размещённым в самом начале <li>.

Как отмечалось выше, все браузеры предоставляют <ul> родителю как отступ, так и отступ. Хотя пользовательские агенты CSS немного различаются, они все включают:

ul,
ol {
  /* user-agent styles */
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-inline-start: 40px;
}
ol {
  list-style-type: decimal;
}
li {
  display: list-item;
  text-align: match-parent;
}
::marker {
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

Все браузеры устанавливают padding-inline-start в 40 пикселей для <ul> элемента по умолчанию. В языках слева направо, таких как английский, это левый отступ. Любой отступ, установленный в пользовательских табличных стилях (это ваш стилизованный файл), имеет приоритет.

Если вы хотите быть явным, задайте следующее в своих табличных стилях, чтобы убедиться, что, если не указано иное, элементы списка в основной области содержимого вашего документа, содержащегося в разделе <main>, правильно отступлены:

:where(main ol, main ul) {
  margin-inline-start: 0;
  padding-inline-start: 40px;
}

И всегда вкладывайте элементы <li> в элементы <ul> или <ol>.