How to make padding:auto work in CSS?

Question

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?

first of all padding:auto; is nothing.. and secondly on whatever you change, you can give !important to use this one in every case — nsthethunderbolt, Aug 31 '13 at 07:15
possible duplicate of [HTML / CSS : Reset List Padding to Default](http://stackoverflow.com/questions/5561101/html-css-reset-list-padding-to-default) — Scott, Aug 31 '13 at 07:15
@nsthethunderbolt I can't use !important because I am working on a Responsive design and thus using !important can make things really difficult with media queries — Vaibhav K, Aug 31 '13 at 07:23
okay.. then you should follow Mr.Alien's answer.. i think that's correct — nsthethunderbolt, Aug 31 '13 at 07:25

score 38 · Accepted Answer · answered Aug 31 '13 at 07:14

38

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;
}

answered Aug 31 '13 at 07:14

Mr. Alien

153,751
34
298
278

I don't want to remove `padding:0` because this will have issues with previously done legacy code. I think the only options is to add padding where required since it can't be unreset like margin. – Vaibhav K Aug 31 '13 at 07:24
@VaibhavKanwal yes, as I suggested – Mr. Alien Aug 31 '13 at 07:34

score 5 · Answer 2 · answered Jan 27 '15 at 16:25

5

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>

answered Jan 27 '15 at 16:25

Adam Grant

12,477
10
58
65

1

I think you might've meant to put margin auto on the child element – Blye Mar 15 '23 at 12:44

score 2 · Answer 3 · answered Aug 31 '13 at 07:17

2

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

answered Aug 31 '13 at 07:17

probablyup

7,636
1
27
40

generally we set `margin: 0; padding: 0` on `body` so the nested elements simply inherit this, the above will work only if you don't set `margin: 0; padding: 0` to body – Mr. Alien Aug 31 '13 at 07:19

score 0 · Answer 4 · answered Aug 23 '18 at 13:37

0

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

p {
    padding: initial;
}

answered Aug 23 '18 at 13:37

Björn Tantau

1,564
14
13

score 0 · Answer 5 · answered Mar 12 '19 at 16:06

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.

How to make padding:auto work in CSS?

5 Answers5

Linked