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

Posted by Juan Guillermo Mariño
.a{fill-rule:evenodd;}techdegree seal-36
Juan Guillermo Mariño
Front End Web Development Techdegree Graduate 19,423 Points

Margin and padding size

Every time I give a value to the property of margin or padding etc... I don't understand sometimes we use 4 numbers or sometimes auto.

  1. When I use 1 number what does that modify? (left,right,up,down?)
  2. When I use only 2 numbers does that modify all sides? for example isn't this the same? padding: 2 3 2 3 = padding: 2 3; ?
  3. what does the auto stand for?

1 Answer

Olivia Orr
Olivia Orr
7,921 Points
Olivia Orr
Olivia Orr
7,921 Points

Hey Juan,

You are able to specify margin and padding according to your preference. For example: To target ONLY the right margin, you would use: margin-right: 10px; To target ONLY the left padding, you would use: padding-left: 20px;

When you see 4 numbers being used at once, it's just a type of shorthand. Think of it like a clock (top, right, bottom, left). For example: padding: 10px 20px 5px 20px is another way of saying "I want to have 10 pixels of padding on the top, 20 pixels of padding on the right, 5 pixels on the bottom, and 20 pixels on the left."

When you use only 2 numbers, you are simply consolidating the shorthand even further. So yes, padding: 2px 3px 2px 3px is the same thing as padding: 2px 3px;

When you use auto, you're telling the browser you want to leave equal space on either side of the element you've specified on the page. So think of it like, "I want the browser to AUTOmatically position this element with equal space on either side."

MODERATOR EDIT: Moved response from Comment Section to Answers.