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

CSS How to Make a Website Styling Web Pages and Navigation Build Navigation with Unordered Lists

Posted by name564681351614
name564681351614
3,497 Points

Margin Commands

While in the "nav ul" code, under the "margin" statement Nick listed the following (margin: 0 10px;). He then stated that represents "0" for the top and bottom and "10px" for the left and right. This is confusing for me because earlier he addressed the top, bottom, left and right as separate statements. IE: "top, bottom, left, right" == "0, 0, 0, 0". At what point does this rule change to "(top and bottom) & (left and right)" == "0, 0"?

2 Answers

Casey Ydenberg
Casey Ydenberg
15,622 Points
Casey Ydenberg
Casey Ydenberg
15,622 Points

When you give the declaration four values instead of two. You can also give just one: margin: 10px gives the element a margin of 10px in every direction.

name564681351614
name564681351614
3,497 Points

Thank you Casey.

So, the options are to:

  1. Provide 1 value that applies to all 4 sides,
  2. Provide 4 values that apply to top, right, bottom and left sides or
  3. Provide 2 values that apply to the "top/bottom" and "left/right".

Is that accurate?

IE: There is no option to provide 3 values, correct?

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Answering your last question, yes you can do something like this:

p{
margin:10px 10px 20px;
}

This will give the p element a margin top of 10px, a margin left and right of 10px and a margin bottom of 20px.

Felipe Barreto
PLUS
Felipe Barreto
Courses Plus Student 9,604 Points
Felipe Barreto
Felipe Barreto
Courses Plus Student 9,604 Points

Yes, the way he stated is just a shortcut: also just the statement margin alone is a shortcut, you can use :

for single statements

margin-top: 0 ; margin-right: 0 ; margin-bottom: 0 ; margin-left: 0;

or use the shortcut "margin" to state all side at once:

margin: 0 0 0 0; => for the four sides

or

margin: 0 0 1; => top, right and left, bottom

or

margin: 0 0; => as followed top, bottom

or

margin: 0; for everything at once if desired.

it on you buddy ;)