How to make padding:auto work in CSS?
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;
}
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>