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 CSS Layout Basics Getting Started with CSS Layout Centering Page Content and Creating a Full-width Header

margin 0 auto

What is the difference between 0 and auto isn't it the same. And why use both 0 and auto , why not margin: 0 or margin: auto

Thanks

Hello there!

To learn more about the Box Model, I'd recommend following this course:

https://teamtreehouse.com/library/the-css-box-model

When you see the following CSS declaration for a block element (margin: 0 auto;) it means that there's a 0 margin on top and bottom of that element, but the left and right margin is set to automatic. This allows you to center a block element inside its container.

The "auto" value could be substituted by any value in pixel (margin: 0 15px), assuming that you would know exactly how wide is your container. In the case above, this specific declaration sets 0 margin to the top and bottom, and 15 pixels on the left and right side of that element.

Let me know if this makes sense!

oh thanks i forgot the shortcut for declaring margin , padding etc. 🤦‍♂️ one last thing can you explain what is auto. What is the the default value for auto?

1 Answer

Hello there,

Auto is already a default value. Whatever value you're stating (can be width or height of a block-level element) is adjusted automatically.

Thanks, Alex