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

CSS How to Make a Website Styling Web Pages and Navigation Style the Portfolio

Patrick Sakai
Patrick Sakai
Courses Plus Student 527 Points

Page Portfolio: Gallery

Why is Gallery margin set to 0, and then Gallery list margin set to 2.5%? Aren't #gallery and #gallery li the same thing? Also, when margin is set to 2.5%, does that mean top, bottom, left and right are all 2.5%? Because it doesn't look that way to me. Thanks.

1 Answer

Hey Patrick,

"#gallery" and "#gallery li" are related, in this instance, because #gallery is the id for the unordered list element that holds the list items. Think of #gallery as the container for the list items. You can think of it as a box that contains all of the list items. If you applied a 2.5% margin to #gallery, it would apply that margin to the entire container instead of each individual list item. By using "#gallery li" the margin is being applied to each list item, so that there is a degree of separation in the display of the images inside of those list items.

And you are correct that margin: 2.5%; sets a margin of 2.5% to the top, right, bottom, and left of the element the margin is set on. That is the reason those images are separated. For a little test to see what it looks like without the margin, just go into your "main.css" and go to the line for #gallery li that sets the margin and toggle that line as a comment (you can press Ctrl + / to do this anywhere on the line). Save it and then preview the changes. The images will smush together and in this instance, it doesn't look good that way. So, having that extra separation really makes the images look good here. :)

You're very welcome, Patrick :)