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
Cory Norell
10,613 PointsWhy do we use both zero and auto for the margin property?
In this video, Guil sets the wrapper margin to this...
.wrapper { margin: 0 auto; }
My question is, why do we include both the zero and the auto values? It seems like simply using auto will accomplish the same result.
2 Answers
Tim Knight
28,888 PointsHi Cory,
You're using 0 because you're being specific. While just using auto might make you think you're getting the same result, it's likely because you're lacking a height value which would then give you some issues.
So here's the basic idea, which I'm sure you know:
margin: 0 auto;
The zero covers the margins for the top and bottom of the box. Auto would then set the margin of the left and right of the box effectively telling the box to center as long as the box has an assigned with. Without a width the box takes up 100% of the space and the auto will have no impact.
If you don't want to modify the top and bottom margin, I would encourage you to just use something like:
margin-left: auto;
margin-right: auto;
Aurelian Spodarec
10,801 PointsDo you know what is the syntax? How does the values behave? What happens if you put in 500px? try it.
What happens if you put auto on both sides? try it.
What happens if you put auto and 0? try it.
What happens if you put 400px 400px? try it
What happens if you put 23px 232px 434px 2px? try it.
Margin, is... marign, and the values go clock vise, a short hand e.g. 0 0 is top-bottom, and right and left,
So margin :0 auto means that on top and bottom there is 0margin and on left and right auto, which means that it will align the content in the center as it will make the margins distribute the same.
What it really does it takes half the width of the container, and then put that as a margin on one side. Which means it's in the center as it has two sides.
I hope it helps.
Cory Norell
10,613 PointsCory Norell
10,613 PointsSo if I have a specified height, not setting the top/bottom margin is likely going to cause layout issues?
I guess the reason I got confused is because in some of the other courses, like the CSS Basics course, Guil simply uses:
margin: auto;To center content (thinking of the Lake Tahoe site). But now that I read your answer, I realized we didn't specify heights if I recall correctly.
Tim Knight
28,888 PointsTim Knight
28,888 PointsI won't guarantee you'd see layout issues if a height is defined. You typically aren't going to be defining a height anyway. I just tend to follow the practice that I don't want to influence an attribute unnecessarily. So if you don't want to set the top/bottom then I say there's no need.
Cory Norell
10,613 PointsCory Norell
10,613 PointsGot it. That seems like a pretty good practice to follow, I'll be sure to incorporate it into my projects.
Thank you for taking time to answer my question!
Also thank you to Mr Bond for the response, it helped as well.
Tim Knight
28,888 PointsTim Knight
28,888 PointsCory,
Looking at it a little further this morning too. I'll note that using just plain
margin: auto;doesn't really seem to be impacted with height and the calculated margin in the browser comes back a zero, so basically usingmargin: autois essentially from what I can tell the same asmargin: 0 auto.