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 trialCarleen Hall
Front End Web Development Techdegree Student 3,158 PointsMargin settings
Can anyone explain? As explained earlier margin (-05px (top), 0px(left and right), 0px bottom)settings are automictically distributed in the order of top, left, right and bottom. How is it that the only margin in the "gallery li" was set at 2.5% and as Nick showed that the 2.5% margin went to the left and right side and not at the top automatically? See his code belowโจ
#gallery li {
float: left;
width: 45%;
margin: 2.5%;
background-color: #f5f5f5;
color: #bdc3c7;
```
2 Answers
Steven Parker
231,210 PointsThe margin settings order is: top, right, bottom, left. Like going around a clock.
The "clock" order applies to most properties that can take separate values for each direction. A single setting will be applied on all 4 sides.
If it appears that the margin is only being applied to the sides, you are probably seeing what is known as vertical margin collapse, as explained on this MDN page.
Carleen Hall
Front End Web Development Techdegree Student 3,158 PointsThanks! Steven makes sense.
nico dev
20,364 Pointsnico dev
20,364 PointsThat was a very clarifying answer indeed!
Also helped me.
Thanks, too!