<ul> and <li> Padding | Sololearn: Learn to code for FREE!
+ 2

<ul> and <li> Padding

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>??

13th Jul 2020, 2:14 AM
ūüĆĻRamarūüĆĻ - avatar
3 Respostas
+ 5
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.
13th Jul 2020, 2:19 AM
Rowsej - avatar
+ 5
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; }
13th Jul 2020, 3:53 AM
Raj Chhatrala
Raj Chhatrala - avatar
+ 1
Thanks Rowsej and ūüĒę Rick Grimes .....Both methods will help.
13th Jul 2020, 3:33 PM
ūüĆĻRamarūüĆĻ - avatar