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 CSS: Cascading Style Sheets Take a Mobile-First Approach

Kireeti K
Kireeti K
9,675 Points
Posted by Kireeti K
Kireeti K
9,675 Points

What does this css code do. margin: 0 auto;

I have read in a forum about this that auto will automatically add margin to both the left and right side of the element. But how much will it add automatically? Also in the project we used padding to get some space on both sides and why we need margin again?

Thanks in advance

donald stouffer
donald stouffer
7,630 Points
donald stouffer
donald stouffer
7,630 Points 
 #wrapper{
     width: 980px;
     margin: 0 auto;

OK, margins are meant to space elements on a webpage away from each other. The code we saw on the video is short for this:

 #wrapper{
     width: 980px;
     margin-top: 0px;
     margin-bottom: 0px;
     margin-left: auto;
     margin-right: auto;

So we are adding no blank space at the top of our section and the bottom. Auto basically centers the element on the screen. If the <section> is 980px wide and your screen size is 1080 wide, then 1080 - 980 = 100px / 2 (left and right). So 50px on each side.

Padding is different because it is space WITHIN the element. Check out this picture. Through your programming journey you will understand when one is needed over the other. The best way to understand CSS is to change your code and see what happens.

4 Answers

Ben Van Beek
Ben Van Beek
31 Points
Ben Van Beek
Ben Van Beek
31 Points

-It adds the same amount of space on both sides, so it will be centered horizontally.

-Image your element as a box with a border. The amount of space you want between your content and that border, is the padding of an element. The amount of space you want between your element and another element, let's say the top of the page, is the margin.

Owa Aquino
Owa Aquino
19,277 Points
Owa Aquino
Owa Aquino
19,277 Points

I call it "center things code" xD.

Seriously it centers the element, but it dependent on its parent element. :)

Cheers!

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,252 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,252 Points

In my experience it works best when the parent element is set to a block level element and to relative position.

Then the target element willl position itself centrally in the available space left to right of the containing element. :-)