如何填充:在CSS中自动工作？

Question

我正在开发一个具有CSS Reset的遗留项目,*{ margin:0; padding:0 }适用于所有内容.现在,我的新代码不需要它,因为它依赖于Normalize.css.这不是什么大问题,但在某些地方我需要使用这两种风格.

我如何取消设置我的CSS？我已经能够做到*{margin:auto}这一点很好.填充也是如此.是否有相同的方法来重置填充.你是怎么解决这个问题的？

Answer 1

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

如果您padding: 0;从* {}浏览器中删除将对您的元素应用默认样式,这将为您提供意外的跨浏览器定位偏移几个像素,因此最好分配padding: 0;使用*而不是如果要覆盖填充,只需使用其他规则,如

.container p {
   padding: 5px;
}

Answer 2

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

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

或者在应用了此边距的元素周围使用第二个容器。padding: 0px auto如果它确实存在的话，这会产生一定的影响。

CSS

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

超文本标记语言

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