Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Bilal Junaidy
1,775 Pointsselecting the list element vs selecting the whole unordered list
could someone please explain me what would be the difference between the following two css properties? and why that difference would exist?
nav ul { padding: 10px 10px }
nav li { padding: 10px 10px; }
2 Answers
Eric Ellenbrook
9,006 PointsIn the first one you are creating a padding around a whole unordered list. This means that everything on the inside of the border of the UL will have a 10px padding (You only need to put padding: 10px; by the way).
In the second one, the list item is what has the padding which means each of the items will have padding surrounding them where as the list it's self stays untouched.
If you can picture it a bit easier imagine you have a picture frame with four equally sized blocks stacked on top of each other so that they're touching. The space that stretches from the edge of those four blocks all the way to the inner edge of the frame is the UL padding. Got that?
If you now space each one of those blocks so that they are spaced 2 inches apart from one another but instead of being centered in the frame, that extra space in between them causes them to be 1 inch from the inside edge of the frame, then the space in between each one of the blocks is the margin on the LI. In this case, 1 inch from the edges of the frame and 2 inches from one another. Two inches because you have the bottom padding on the top block and the top padding on the bottom block and right padding on the left block and left padding on the right block.
Does this make sense? If not I can make a diagram for you.
Jason Anello
Courses Plus Student 94,610 PointsHI Bilal,
1) Adds padding around the entire unordered list. This provides spacing between the list items and the edge of the unordered list.
2) This provides padding around each individual list item.
It might help to see the two in a codepen demo. http://codepen.io/anon/pen/yFCAB
When comparing the 2 you'll notice that the text within each list item has space around it when applying the padding to the list items themselves.
When applying the padding to the unordered list (1st one) then this creates space around all the list items as a whole and separates them from the edges of the unordered list.