Page Portfolio: Gallery

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. :)