Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Patrick Sakai
PLUS
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 :)