Copy: How to add margins to items

Question

I have an unordered list and I set the style to none, which creates the default indented space.

My understanding of margins and padding is that margins are the outer space of an element, so I tried to use margin: 0 to fix the gap, but it didn't work. When I use padding: 0, it removes the indented space from the li items.

Now I'm confused why there is padding and not margin in this case.

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

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

Answer 1

The default setting of the browser is to add some padding to the UI instead of margin. So using padding: 0px will override the browser's default value.

Look at the Computed tab on the right, it shows a list of browser styles 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>