HTML / CSS : Reset List Padding to Default

Question

I'm using *{margin:0; padding:0;} and this is the first time that it breaks me in something. List paddings and margins are 0 too, so the indentation is lost. and I would like to reset them to their original state, how is this possible?

I've tried this with no success:

ul,ol{ 
   margin :auto; /* This Works */
   padding:auto; /* This Not :( */
}

So how should I fix this?

Why do you expect `padding:auto` to work? – random Apr 06 '11 at 03:26 — random, Apr 06 '11 at 03:26
why not if it works for margin too? – Adam Halasz Apr 06 '11 at 03:29 — Adam Halasz, Apr 06 '11 at 03:29
Can you be more specific than "Lists are broken"? – Richard JP Le Guen Apr 06 '11 at 03:32 — Richard JP Le Guen, Apr 06 '11 at 03:32
Sure, sorry If it was confusing, I edited the question. – Adam Halasz Apr 06 '11 at 03:35 — Adam Halasz, Apr 06 '11 at 03:35

score 8 · Accepted Answer · answered Apr 06 '11 at 03:36

8

The point of a reset is to eliminate variations due to browser defaults. In other words, there is no definitive way to "unreset" because different browsers may have different defaults.

However, you can choose your own default values, and I think that's what you're trying to do here.

A good way to do this is to look at a browser's default stylesheet (you should be able to find how to do this by doing a search). For example, you can see the Firefox default stylesheet with this URL: resource://gre/res/html.css

answered Apr 06 '11 at 03:36

jdigital

11,926
4
34
51

The URL does not work for me anymore, but [here](https://dxr.mozilla.org/mozilla-central/source/layout/style/res/html.css) is a link to the stylesheet on mozillas website (Taken from [this SO question](https://stackoverflow.com/questions/6867254/browsers-default-css-for-html-elements)). – SimonH Nov 13 '20 at 08:09

score 6 · Answer 2 · answered Oct 08 '13 at 17:18

6

There is no way to restore default values, but changing padding of 'ol' or 'ul' and 'li' it will look fine. This works for me..

ol{
    padding: 0 25px;
}
ol li{
    padding-left: 0px;
}

answered Oct 08 '13 at 17:18

Juan

89
1
3

score 0 · Answer 3 · answered Jun 26 '19 at 14:37

As you can see if you play with the snippet below, the initial value for list padding-left is 0. My point is regarding your statement:

I would like to reset them to their original state

what I'm trying to illustrate and what @jdigital was kind of saying in his answer is that there is no original state for CSS properties, all of them are dependent on their browser implementation, e.g. default browser stylesheets.

ul {
  outline: 1px solid coral;
  list-style: none;
  padding-left: 48px;
}

li {
  outline: 1px solid lightseagreen;
}

ul {
  padding-left: initial;
}

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
<ul>

score 0 · Answer 4 · answered May 07 '22 at 11:04

You have to keep in mind when you reset padding and margin such as *{padding: 0; margin: 0;}. The ul tag have some padding as padding-inline-start: default_value;.

The following these steps you can get rid of this list-style-position: outside; issue :

First of all to find out the default value of padding-inline-start open your browser developer tools and select your ul tag.
In the styles tab below or aside to the Element tab (depending on the resolution of Developer tools you have opened) scroll and find the ul tag styles from user agent stylesheet it will look like this
As you have seen the styling of padding-inline-start in my browser its value is 40px. Now note this value.
Then goto your favorite code editor where you are coding and set the style of specific ul such as ul{padding-inline-start: 40px}
Don't forget to remove the comment we have make at the start to see the effect while resetting the margin and padding

Hope this will work for you.

score 0 · Answer 5 · answered Jun 06 '22 at 18:39

revert is what you are looking for. It will basically revert any styles made BY YOUR STYLESHEET and not the user-agent/browser stylesheet.

ol, ul, li, {
 margin: revert;
 padding: revert; /* Padding is what gives the indentation */ 
}

Reference:

score -7 · Answer 6 · edited Jun 04 '12 at 02:50

-7

If I understand the question correctly, you could try adding !important; as in the following:

ul, ol {
   margin : auto;
   padding: auto !important;
}

Normally, it overrides all earlier predefined values.

edited Jun 04 '12 at 02:50

A5C1D2H2I1M1N2O1R2T1

190,393
28
405
485

answered Jun 03 '12 at 22:08

IgnasK

384
2
19

However, using !important has it's pitfalls. It could end up overriding nested elements or complicate your CSS down the line. Use w/ caution. – andy4thehuynh Nov 26 '13 at 22:21
`auto` is not a valid value for the `padding` property...no matter if you add `!important` to it, it's simply ignored by the browser, e.g. does nothing! – exside Jun 26 '19 at 14:33

HTML / CSS : Reset List Padding to Default

6 Answers6

Linked