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
Brian Gallagher
9,074 Points#gallery v #gallery li - Margin and Padding
What exactly does the #gallery refer to? I know it's an unordered list but I don't quite understand which element it relates to. For example, why do we apply list-style: none to this instead of to #gallery li? I've tried adding margin and padding to #gallery and it make the images smaller. Why? I often struggle when deciding which specific selector to apply margin and padding to.
3 Answers
Luis Galvan
5,247 PointsI suppose that removing the list-style for either #gallery (ul) or li is mostly trivial, and is totally up to you depending on what you might find best for the situation.
When adding margin and padding to an element, we need to take into account that whatever we add will decrease space for its contents. I believe in that video, the images are set to a certain percentage for their width (something like 40%?), so they will always be 40% of whatever space they have available according to their parent element.
Laura Cressman
12,548 PointsIf I remember, it refers to the unordered list element, and we just give it the gallery ID. So our element is still the unordered list, but to make things easier, like in case we were to add a different unordered list to our HTML, we give it an ID. Every time you type #gallery into your CSS file, you are just targeting the unordered list with the ID of gallery. As for the list-style: none property and value, this removes the bullet points, which are more of a feature of the overall list than the individual list items. I did try it on Code Pen, though, and applying it to the list items works also. Here's the link if you want to play around with the styling: http://codepen.io/anon/pen/HxwfJ For the margin and padding question, my intuition is that if the gallery unordered list has a fixed amount of space that it can take up, and we decide to add extra margin and padding, then the extra amount of space more padding takes up must be compensated for by making the images smaller. What do you think?
Brian Gallagher
9,074 PointsThanks a million. Really solid explanations! If one of the elements has a specific width, then when you add margin or padding the element with an unspecified width will be affected. The images are set at 45% of the gallery (100%). So if I add padding of 5% to the gallery, the images are now 45% of 90% (ie smaller)? I think that makes sense. Thanks again.