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

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

Carleen Hall
seal-mask
.a{fill-rule:evenodd;}techdegree
Carleen Hall
Front End Web Development Techdegree Student 3,158 Points
Posted by Carleen Hall
.a{fill-rule:evenodd;}techdegree
Carleen Hall
Front End Web Development Techdegree Student 3,158 Points

Margin 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
Steven Parker
231,248 Points
Steven Parker
Steven Parker
231,248 Points

:point_right: The 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.

nico dev
nico dev
20,364 Points
nico dev
nico dev
20,364 Points

That was a very clarifying answer indeed!

Also helped me.

Thanks, too!