What does margin auto mean?

Question

I checked MDN to see what means to have an auto value for margin property and it says: "auto is replaced by some suitable value, e.g. it can be used for centering of blocks."

But what it is that suitable value, and suitable for what?

I tried myself some experiments and I saw that if I add margin-left: auto, the container goes to right (like is floating to right):

#container {
    background: red;
    width: 120px;
    margin-left: auto;
}

http://jsfiddle.net/sph2j6jx/

Does it mean that adding margin auto is actually something like "take all the space available"? And when you add both left and right margins it centers the div because it tries to take all the space from left and from right?

Answer 1

#main {
  width: 600px;
  margin: 0 auto; 
}

<div id="main"> Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right. Then, you can set the left and right margins to auto to horizontally center that element within its container. The element will take up the width you specify, then the remaining space will be split evenly between the two margins.</div>

Answer 2

The value of said property is adjusted automatically according to the content or the context of the element.

For example, a block-level element with height: auto will grow taller as it contains more text. For another example, a block element with margin: 0 auto will have the left and right margins increased until it becomes centered along the y-axis of the viewport.

It really depends on the property you give the value to, different properties behave differently depending on the content and context.

Reference - What is the meaning of `auto` value in a CSS property.

Answer 3

Auto margins

Depending upon the circumstances, provision of an auto value instructs the browser to render a margin according to the value provided in its own stylesheet. However, when such a margin is applied to an element with a meaningful width, an auto margin instead causes all of the available space to be rendered as whitespace.

From w3.org