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...
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 class="element_wrapper">
<div class="element">
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.
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
