Как сбросить заполнение, чтобы списки заполнения отображались правильно?

Question

у меня body * { padding: 0; }. Это удаляет все отступы из списка. Без удаления CSS, что я могу добавить, что может вернуть заполнение для списков?

Answer 1

По сути, я бы поставил под сомнение подход к использованию body * { padding: 0; }, поскольку это слишком широкое правило, чтобы разумно применять его к хорошо структурированному макету, но в вашем случае вы могли бы сделать пару вещей.

body ul, body ol { padding: 15px; }

Вышеприведенное добавит заполнение к оболочке списка, но вы также можете охватить элементы списка.

body li { padding: 15px; }

Обе вышеперечисленные опции должны появиться после существующего удаления отступов.

Последней альтернативой будет использование не селектора вместо вашего селектора body *.

body :not(li) { padding: 0; }

Или, чтобы защитить ul, ol и li:

body :not(li):not(ul):not(ol) { padding: 0; }

Answer 2

По умолчанию padding для элементов списка: 40px.

Обратите внимание, что установка padding для элементов списка также удаляет их маркеры, поэтому вы, вероятно, захотите добавить это обратно с помощью list-style-position: inside. Это немного смещает маркер, поэтому вы можете использовать 30px из padding.

body * {
  padding: 0;
}

li {
  padding: 0 30px;
  list-style-position: inside;
}

<p>No padding</p>

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

Однако лучшим вариантом было бы просто не устанавливать отступы для элементов списка.

Answer 3

Добавьте свой собственный обратно. Вы должны сделать это как "конкретные" сами сброса.

body ul, body ol { padding: (your value) }

См .: http://cssspecificity.com/