HTML/CSS：将列表内边距重置为默认值

Question

我使用了*{margin:0; padding:0;}，这是第一次导致问题出现。列表的padding和margin也为0，所以缩进丢失了。我想将它们重置为原始状态，这可能吗？

我尝试过以下方法，但没有成功：

ul,ol{ 
   margin :auto; /* This Works */
   padding:auto; /* This Not :( */
}

那么我应该如何修复这个问题呢？

- Adam Halasz

---

为什么您期望 padding:auto 能够起作用？ - random

如果对于保证金也有效的话，为什么不这样做呢？ - Adam Halasz

你能具体说明"列表出了问题"吗？ - Richard JP Le Guen

当然，抱歉如果有些混淆，我已经编辑了问题。 - Adam Halasz

Answer 1

重置的目的是为了消除由浏览器默认值造成的差异。换句话说，没有一种确定的“取消重置”的方法，因为不同的浏览器可能有不同的默认值。

然而，您可以选择自己的默认值，我想这就是您在尝试做的事情。

一种好的方法是查看浏览器的默认样式表（您可以通过搜索来找到如何执行此操作）。例如，您可以使用以下URL查看Firefox的默认样式表：resource://gre/res/html.css

- jdigital

---

这个URL对我已经不起作用了，但是在这里是Mozilla网站上样式表的链接（摘自这个SO问题）。 - SimonH

Answer 2

无法恢复默认值，但是更改“ol”或“ul”和“li”的填充即可使其看起来正常。这对我有效。

ol{
    padding: 0 25px;
}
ol li{
    padding-left: 0px;
}

- Juan

Answer 3

如您在下面的片段中玩耍，就会发现列表 padding-left 的 initial 值为 0 。我要说的是关于您的声明：

我想将它们重置为原始状态

我试图阐明的问题，以及@jdigital在他的答案中所说的是，CSS属性没有原始状态，所有这些属性都取决于其浏览器实现，例如默认浏览器样式表。

ul {
  outline: 1px solid coral;
  list-style: none;
  padding-left: 48px;
}

li {
  outline: 1px solid lightseagreen;
}

ul {
  padding-left: initial;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
<ul>

- exside

Answer 4

当您重置填充和边距时，例如*{padding: 0; margin: 0;}，请记住。 ul标签有一些填充，如padding-inline-start: default_value;。

按照以下步骤，您可以摆脱这个list-style-position: outside;问题：

• 首先，要找出padding-inline-start的默认值，请打开您的浏览器开发工具并选择您的ul标签。
• 在样式选项卡下方或旁边的元素选项卡（取决于您打开的开发工具的分辨率），滚动并从user agent stylesheet中找到ul标签样式，它看起来像这样。
• 正如您所看到的，在我的浏览器中，padding-inline-start的样式值为40px。现在请注意此值。
• 然后，转到您正在编码的喜爱代码编辑器，并设置特定的ul样式，例如ul{padding-inline-start: 40px}
• 不要忘记删除我们在开始时进行的注释，以查看重置边距和填充的效果

希望这对您有用。

- m-naeem66622

Answer 5

revert 是你要找的。它基本上会还原由你的样式表而不是用户代理/浏览器样式表所做的任何样式。

ol, ul, li, {
 margin: revert;
 padding: revert; /* Padding is what gives the indentation */ 
} 

参考资料：

• CSS MDN 文档中的 revert
• 什么是样式来源

- SNikhill

Answer 6

如果我理解问题正确的话，您可以尝试添加!important;，如下所示：

ul, ol {
   margin : auto;
   padding: auto !important;
}

通常情况下，它会覆盖所有先前预定义的值。

- IgnasK

---

然而，使用!important也有其缺点。它可能会覆盖嵌套元素或使您的CSS变得更加复杂。请谨慎使用。 - andy4thehuynh

auto 不是 padding 属性的有效值...即使你在它后面加上 !important，浏览器也会忽略它，例如什么都不做！ - exside