List Items UL and LI

HTML & CSS
1

I am trying to figure out how list items work with css. Sometimes examples show
ul {list-style: none; margin: 0, padding: 0}
and other times you declare this in the li
li {list-style: none; margin: 0, padding: 0}

Is there a reason that sometimes you declare this in the li and other times in the ul?

Thanks - Gayle

2

I do not know the technical reasons and use colours to highlight the differences:



[COLOR=#333333]ul {list-style:none; margin:0, padding:0; background-color: #faa;} [/COLOR]

[COLOR=#333333]li {list-style:none; margin:0, padding:0; [/COLOR][COLOR=#333333] background-color: #aff;[/COLOR][COLOR=#333333]} 
[/COLOR]
3

Coder preference , mostly. It is nearly impossible to judge code w/o knowing it’s intended purpose, but I am assuming this was just part of standardizing reset CSS.

SOME (not all) CSS properties , such as list-style for example, are inherited by descent elements. so setting the list-style for the UL is tantamount to setting to its LI children.
Padding and margin are NOT inherited and am not sure if there was ever a time when the indent on a list was created from the default margin on the LI element, but that might account for what you are seeing.

4

You can use one style for list, and apply it on <ul>:

<ul style=“list-style:circle”>
<li>asd</li>
</ul>

Or you can applay different styles for each <li> inside list:

<ul>
<li style=“list-style:circle”>asd</li>
<li style=“list-style:none”>asd</li>
<li style=“list-style:square”>asd</li>
</ul>

5

The list element doesn’t have any default padding or margins but the ul does and whether it’s left padding or left margin added to the ul varies between browsers (historically). Therefore it follows that the ul needs to be addressed to reset (or set) margin/padding explicitly. It then also makes sense at the same time to set the list style via the ul which as mentioned above is inherited into the children list elements saving the need for another rule.