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?
5 Answers
auto is not a valid value for padding property, the only thing you can do is take out padding: 0; from the * declaration, else simply assign padding to respective property block.
If you remove padding: 0; from * {} than browser will apply default styles to your elements which will give you unexpected cross browser positioning offsets by few pixels, so it is better to assign padding: 0; using * and than if you want to override the padding, simply use another rule like
.container p { padding: 5px;
}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> <div> Hello world </div>
</div>You should just scope your * selector to the specific areas that need the reset. .legacy * { }, etc.
You can reset the padding (and I think everything else) with initial to the default.
p { padding: initial;
}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.
