Why does setting margin remove list indentation

Question

I have created a nested list in html.

Why does setting margin: 0 using the *{} selector remove the list indention but not if I use the body selector?

body {
  padding: 0px;
}

<ul>
  <li>Home</li>
  <li>About</li>
  <li>Resume
    <ul>
      <li>Experience</li>
      <li>Skills</li>
      <li>Portfolio</li>
    </ul>
  </li>
  <li>Interests
    <ul>Photography</ul>
    <ul>Favourites</ul>
  </li>
</ul>

Because `*` represent all element, and `body{}` just the body. The padding is in the `
` element — Roy Bogado, Apr 18 '19 at 09:04
What @Roy said, plus the fact that `padding` is [not an inherited property](https://stackoverflow.com/questions/5612302/which-css-properties-are-inherited). The padding you set for the `body` element applies only to that element, not to its children. — Thomas, Apr 18 '19 at 09:05

score 1 · Accepted Answer · answered Apr 18 '19 at 09:10

1

The asterisk * means all, so when you put a property in (all) it basically styles all the elements in your HTML body

But when you choose only to style the body you don't change anything's style but body

You can read the answers here for more details

answered Apr 18 '19 at 09:10

xTrimy

804
9
23

but * have lowest `Specificity` so there is applied in them element there havnt same property mentioned in * – Nisharg Shah Apr 18 '19 at 09:12
@NishargShah Sorry I don't understand your comment – xTrimy Apr 18 '19 at 09:13
@NishargShah you're right, * has lowest specificity, but that doesn't matter here, as the "body" selector doesn't select ul's – Jonas Grumann Apr 18 '19 at 09:14
@JonasGrumann Thanks for your comment, now I understand what he says :D – xTrimy Apr 18 '19 at 09:15

Why does setting margin remove list indentation

1 Answers1