css - 如何重置填充以便正确显示列表填充？

Question

我有 body * { padding: 0; }。这将从列表中删除所有填充。在不删除 CSS 的情况下，我可以添加什么来恢复列表的填充？

Answer 1

列表元素的默认内边距是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>

但是，更好的选择是一开始就不要在列表元素上设置填充。