<ul> and <li> Padding

Question

Tried looking up a question with a similar problem but got no solution.
So i was reading somewhere and i kinda got confused. This is the CSS code:
ul {
padding-left: 20px;
list-style-type: none;
}
ul li {
padding-left: 20px;
background-image: url("images/star.png");
background-position: top left;
background-size: 16px 16px;
background-repeat: no-repeat;
}
Would someone please explain why the <li> requires the 20px padding yet it has already been included in the <ul>??

Answer 1

Probably if the developer wants there to be padding between items in the list. The padding for ul seperates it from other elements, and the padding for ul li seperates the individual list items.

Answer 2

Rowsej is on point.

I just want to add one tip, you can use the 'inherit' value if you are going for same padding value as it's parent.
That way you won't have to change it everytime you change on parent.

ul {
padding-left: 20px;
}

ul li {
padding-left: inherit;
}

Answer 3

Thanks Rowsej and 🔫 Rick Grimes .....Both methods will help.