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
Frank Horbelt
1,287 PointsMargin doesn't look right
At about 8:25 in this video, we are told the 2.5% margin is applied to all sides of each list item. Wouldn't that make more space between the two images (2.5% right margin for image 1 and 2.5% left margin for image 2) for a total of 5% margin? Is it just an optical illusion, or doesn't it appear that there is less space between the images than there is in the outer margins?
2 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Frank,
What you're seeing on the outer margins is the 2.5% margin the list items have plus the 5% padding that the wrapper div has.
The 100% that the list items added up to is only the content area of the wrapper div. padding is extra on top of that.
You're correct that the space between is 5% and that should be twice as big as the 2.5% on either end.
To visualize this better you can temporarily add the following styles to #wrapper:
#wrapper {
background: orange;
background-clip: content-box;
}
What the background-clip property is doing here is confining the orange background to the content box only. It won't cover the 5% padding area like it normally would. Then you should be able to see that the gutter between the columns is in fact twice as big as the margins on either end.
Frank Horbelt
1,287 PointsThank you very much. I know that was a silly thing, but it was really bugging me. Your explanation makes perfect sense.