如何在CSS中实现padding:auto的效果？

Question

我正在处理一个遗留项目，其中应用了 *{ margin:0; padding:0 } 的 CSS Reset。现在，我的新代码不需要这个 Reset，因为它依赖于 Normalize.css。这一直不是什么大问题，但有些地方我需要同时使用这两种样式。

如何取消 CSS Reset？我已经能够使用 *{margin:auto}，这很好用。但同样的方法并不能适用于 padding。是否有一种相应的方法来重置 padding？你是如何解决此类问题的？

- Vaibhav K

---

首先，padding:auto; 没有任何作用。其次，无论你改变什么，都可以使用 !important 在每种情况下使用此选项。 - nsthethunderbolt

可能是HTML / CSS：将列表填充重置为默认值的重复问题。 - Scott

@nsthethunderbolt，我无法使用! important，因为我正在处理响应式设计，并且使用! important 会使媒体查询变得非常困难。 - Vaibhav K

好的，那么你应该遵循Mr.Alien的答案...我认为那是正确的。 - nsthethunderbolt

Answer 1

auto不是padding属性的有效值，唯一可以做的就是从*声明中去掉padding: 0;，否则只需将padding分配给相应的属性块即可。

如果您从* {}中移除padding: 0;，那么浏览器将对您的元素应用默认样式，这将导致意外的跨浏览器定位偏移几个像素，因此最好使用*指定padding: 0;，然后如果您想覆盖填充，请使用另一条规则。

.container p {
   padding: 5px;
}

- Mr. Alien

---

我不想删除 padding:0，因为这将对之前编写的遗留代码产生影响。我认为唯一的选择是在需要时添加填充，因为它不能像边距那样重置。 - Vaibhav K

@VaibhavKanwal 是的，就像我建议的那样 - Mr. Alien

Answer 2

最简单的解决方案是使用margin。

.element {
  display: block;
  margin: 0px auto;
}

或者在应用了这个边距的元素周围使用第二个容器。这将有点类似于padding: 0px auto，如果它存在的话。

CSS

.element_wrapper {
  display: block;
  margin: 0px auto;
}
.element {
  background: blue;
}

HTML

<div class="element_wrapper">
  <div class="element">
    Hello world
  </div>
</div>

- Adam Grant

---

我认为你可能想在子元素上设置margin auto。 - Blye

Answer 3

你只需要将 * 选择器限定在需要重置的具体区域中。例如.legacy * { }等。

- probablyup

---

通常我们会在 body 上设置 margin: 0; padding: 0，这样嵌套的元素就可以继承它。但是如果你对 body 设置了 margin: 0; padding: 0，上述方法就不起作用了。 - Mr. Alien

Answer 4

您可以使用initial将内边距（以及我想是其他所有属性）重置为默认值。

p {
    padding: initial;
}

- Björn Tantau

Answer 5

如果你的目标是重置所有内容，那么@Björn的答案应该是你的目标，但应用为：

* {
  padding: initial;
}

如果此文件在你的原始reset.css之后加载，它应该具有相同的权重，并依赖于每个浏览器的默认填充作为初始值。

- Facundo Colombier