Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make padding:auto work in CSS?

Tags:

css

css-reset

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?

like image 672
Vaibhav Kanwal Avatar asked Aug 31 '13 07:08

Vaibhav Kanwal


People also ask

Can padding be auto 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.

Is padding inheritable?

The value of this attribute should be either a length, a percentage, or the word inherit. If the value is inherit, it will have the same padding as its parent element. If a percentage is used, the percentage is of the containing box.

Why does margin auto not work?

margin: auto; , it will not work. This is because by default the block-level elements such as a div, p, list, etc take up the full width of its parent element, and no space is left to adjust the element horizontally. So, the very first thing you need to check is whether you have set the width of the element or not.

What is the order of padding in CSS?

When three values are specified, the first padding applies to the top, the second to the right and left, the third to the bottom. When four values are specified, the paddings apply to the top, right, bottom, and left in that order (clockwise).


1 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; } 
like image 71
Mr. Alien Avatar answered Sep 29 '22 04:09

Mr. Alien