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 Adding Pages to a Website Style New Pages

priyanka dash
priyanka dash
5,340 Points

can there be more explanation for a beginner about the code line margin:0 auto 30px;

if all the value can be discusses individually and how it affects the margin property ,it would be better.

2 Answers

Jason DeValadares
Jason DeValadares
7,190 Points

Hey man, the Margin property as 4 values that run in this order: Top, Right, Bottom, Left. You can set them all the long way like this:

margin-top: 10px;
margin-right:10px;
margin-bottom:10px;
margin-left:10px;

To save time we do it shorthand, like the code you provided. This will follow the same rotation though. The first number you put is the top, the second the right, the third the bottom and the fourth the left.

In the example you provided the margin is using this shorthand version. They've omitted the last value though. Let's say for example, you wan to have a margin of 10px on the top and bottom and 5px on the left and right. You COULD do the long hand version above, or even the shorthand like this:

margin: 10px 5px;

CSS is smart enough to understand, that if you only include two options, they should go in the direction of top and bottom together and then left and right together.

So now say you want to have the top and bottom different but the sides the same. Since we know that the shorthand of two values will go top and bottom then left and right, we have to provide another option as a third value to override the top/bottom part in the first value. So now if we put that third option, it would understand that we want top, left and right, bottom. The below would give us 10px on the top, 5px on each side and then 30px on the bottom:

margin: 10px 5px 30px;

In the example you've provided they've changed that 5px option above to "auto". Putting "auto" will let CSS automatically put margins on either side so that the total width will add up to 100% of the container it's in. Say for example you have a box that's 50px wide but you want to center it on the page. You can use auto to do that. It will just add the same amount of margin to each side to put it in the center.

In the example you've provided they've put 0px margin from the top of the page, centered it with auto on each side and then added 30px margin on the bottom:

margin: 0 auto 30px;

Hope that helps dude!