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>

[The difference between margin and padding](https://stackoverflow.com/questions/2189452/what-is-the-difference-between-margin-and-padding-in-css?rq=2) — Md. Rakibul Islam, Aug 02 '23 at 15:04
`padding: 0` didn't remove the padding from the `li` elements, it removed it from the `ul` By default `ul` elements have padding. That's why setting the padding "worked" but removing `margin` didn't. `ul` items have top and bottom margin. — disinfor, Aug 02 '23 at 15:06
@zer00ne, answers go down there where we can point out that hard-coded values like that are not good practice. Browser defaults and other existing style rules vary. — isherwood, Aug 02 '23 at 15:10

score 0 · Accepted Answer · answered Aug 02 '23 at 15:03

0

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>

answered Aug 02 '23 at 15:03

WOUNDEDStevenJones

5,150
6
41
53

Zero values should not have units. In fact, browsers flag them as invalid. – isherwood Aug 02 '23 at 15:10
1

@isherwood source? I've never heard that, and the best I can find is that the unit is optional, not invalid. Firefox and Chrome don't seem to flag it in any way. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Values_and_Units "When including a length value, if the length is 0, the unit identifier is not required.". Also https://stackoverflow.com/questions/7923042/when-specifying-a-0-value-in-css-should-i-explicitly-mark-the-units-or-omit. Even the spec only says it's optional: https://www.w3.org/TR/CSS22/syndata.html#length-units "After a zero length, the unit identifier is optional." – WOUNDEDStevenJones Aug 02 '23 at 15:46
1

I may have to retract part of that. It's my IDE that flags them. The point is that the units are redundant and useless, and therefore clutter. – isherwood Aug 02 '23 at 15:54
@WOUNDEDStevenJones oh wow! Can I rely on the computed tab to see default styles on HTML elements. Just like h1 tag has margin by default? – Coca Coffee Aug 03 '23 at 13:11
Yes, you can! By default, an `h1` would look the same as `p` with no default browser styling applied. But each browser has default styles that they apply, and you can view those via developer tools. – WOUNDEDStevenJones Aug 03 '23 at 14:03

Adding margin to li items

1 Answers1