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