如何使填充：自动在 CSS 中工作？答案

【问题标题】：How to make padding:auto work in CSS?如何使填充：自动在 CSS 中工作？
【发布时间】：2013-09-03 22:21:42
【问题描述】：

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

如何取消重置我的 CSS？我已经能够做到*{margin:auto} 工作正常。对于填充，情况并非如此。是否有等效的方法来重置填充。你如何解决这个问题？

【问题讨论】：

【解决方案1】：

auto 不是padding 属性的有效值，您唯一能做的就是从* 声明中取出padding: 0;，否则只需将padding 分配给相应的属性块。

如果您从* {} 中删除padding: 0;，那么浏览器会将默认样式应用于您的元素，这会给您带来意想不到的跨浏览器定位偏移几个像素，因此最好使用* 分配padding: 0;，而不是如果你想覆盖填充，只需使用另一个规则，如

.container p {
   padding: 5px;
}

【讨论】：

【解决方案2】：

支持的最简单的解决方案是使用边距

.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>

【讨论】：

【解决方案3】：

您应该只将您的 * 选择器限定在需要重置的特定区域。 .legacy * { }等

【讨论】：

一般我们在body 上设置margin: 0; padding: 0 所以嵌套元素只是继承了这个，上面的方法只有在你不设置margin: 0; padding: 0 为body 时才有效

【解决方案4】：

您可以使用initial 将填充（我认为是其他所有内容）重置为默认值。

p {
    padding: initial;
}

【讨论】：

【解决方案5】：

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

* {
  padding: initial;
}

如果这是在您原来的 reset.css 之后加载的，那么它应该具有相同的权重，并且将依赖每个浏览器的默认填充作为初始值。

【讨论】：