css - 如何使填充：自动在 CSS 中工作？

Question

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

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

score 34 · Accepted Answer

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

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

.container p {
   padding: 5px;
}

score 3 · Accepted Answer

最简单的支持解决方案是使用保证金

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

score 2 · Accepted Answer

2

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

于 2013-08-31T07:17:02.023 回答

score 0 · Accepted Answer

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

p {
    padding: initial;
}

score 0 · Accepted Answer

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

* {
  padding: initial;
}

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

5 回答 5