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
Jeffrey Bulman
Courses Plus Student 1,747 PointsCSS number correlation or somthing along those lines
So i have been trying to figure out why in css if i have this - margin: 20px 0 0;} the 20px is for the top and the second 0 is for left and right side of element and the final 0 is for the bottom. but if it was like this - margin: 20px 0;} the 20px would be for top and bottom and the 0 for left and right. This is not explained well or at all why its like this, as the way the numbering works does not make sense and seems to change in a weird way so trying to to understand is not easy for me anyway.
If i had {margin: 20px 10 5 0;} would that mean i am applying those individual vales to each side of element ? and for each value i drop the first two take up a correlating side and represent it. ??
1 Answer
Alex Robertson-Brown
Courses Plus Student 8,956 PointsCSS Margin Documentation - https://developer.mozilla.org/en/docs/Web/CSS/margin
The margin property is supposed to be used with these shorthand number values (see Syntax section of docs). If you want to set each side individually you can use margin-top, margin-right, margin-bottom or margin-left instead.
So in your example margin: 20px 10 5 0; would translate to
margin-top: 20px;
margin-right: 10;
margin-bottom: 5;
margin-left: 0;
It becomes second nature once you learn the rule, but I can understand the inital confusion.