Adding margin to li items

Question

I have an unordered list and I set the style to none which creates spaces as its by default indented.

My understanding of margin vs padding was margin is the outer space of elements hence I tried to use margin: 0 to fix the gap but it didn't work. When I used padding: 0 it removed the indented space from li items.

Now I'm confused why padding worked in this case instead of margin.

ul {
  list-style-type: none;
  padding: 0px;
}

<ul>
  <li>
    Linkedin
  </li>
</ul>

Answer 1

The browser default is to add some padding to the ul, not margin. So using padding: 0px overwrites that browser default value.

See how in the Computed tab on the right, it's showing the Browser Styles which lists padding-left: 40px:

ul.no-padding {
  list-style-type: none;
  padding: 0px;
}

ul.no-margin {
  list-style-type: none;
  margin: 0px;
}

<ul>
  <li>
    Linkedin
  </li>
</ul>

<ul class="no-margin">
  <li>
    Linkedin
  </li>
</ul>

<ul class="no-padding">
  <li>
    Linkedin
  </li>
</ul>