[css] How to make padding:auto work in CSS?

I am working on a legacy project that has CSS Reset with *{ margin:0; padding:0 } applied to everything. Now, my new code doesn't need that as it relies on Normalize.css. This hasn't been much of a problem but at some places I need to use both styles.

How do I unreset my CSS? I have been able to do *{margin:auto} which works fine. The same isn't true about padding. Is there an equivalent way to reset the padding. How do you go about solving this?

This question is related to css css-reset

The answer is


You can reset the padding (and I think everything else) with initial to the default.

p {
    padding: initial;
}

You should just scope your * selector to the specific areas that need the reset. .legacy * { }, etc.


The simplest supported solution is to either use margin

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

Or use a second container around the element that has this margin applied. This will somewhat have the effect of padding: 0px auto if it did exist.

CSS

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

HTML

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

if you're goal is to reset EVERYTHING then @Björn's answer should be your goal but applied as:

* {
  padding: initial;
}

if this is loaded after your original reset.css should have the same weight and will rely on each browser's default padding as initial value.