Question

I have body * { padding: 0; }. This removes all padding from list. Without removing the CSS, what can I add that can bring back padding for lists ?

Answer 1

Add your own back in. You have to make it as "specific" are the reset itself.

body ul, body ol { padding: (your value) }

See: http://cssspecificity.com/

Answer 2

Fundamentally I'd question the approach of using body * { padding: 0; } since it's far too broad a rule to reasonably apply to a well-structured layout, but in your case, you could do a couple things.

body ul, body ol { padding: 15px; }

The above will add padding to the list wrapper, but you may also want to cover the listitems as well.

body li { padding: 15px; }

Both of the above options would need to come after your existing removal of the padding.

The final alternative would be to use a not selector instead of your body * selector.

body :not(li) { padding: 0; }

Or, to protect ul, ol, and li:

body :not(li):not(ul):not(ol) { padding: 0; }

Answer 3

The default padding for list elements is 40px.

Note that setting a padding on list elements also removes their bullet, so you'll also probably want to add this back in with list-style-position: inside. This offsets the bullet a little bit, so you may want to go with 30px of padding instead.

body * {
  padding: 0;
}

li {
  padding: 0 30px;
  list-style-position: inside;
}

<p>No padding</p>

<ul>
  <li>One</li>
  <li>Two</li>
</ul>

However, a better option would be to simply not set padding on the list elements in the first place.

How to reset padding so lists padding are shown correctly?

3 个答案: