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

Question

What is the meaning of auto value of a CSS property. What happens when value of a CSS property is set to auto?

Answer 1

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.

Answer 2

auto means automatically adjusted. The most common reason I use auto is:

margin: 0 auto;

to center an element.

Please note: if size is not declared, then it won't work.

Example 1: div is not centered, auto does not work

<style>
    .cont {
        margin: 0 auto;
    }
</style>
<div class="cont"></div> 

---

Example 2: div is centered to the page

<style>
    .cont {
        width: 1000px;
        margin: 0 auto;
    }
</style>
<div class="cont"></div> 

Answer 3

It really depnds on that attribute you use.For example,a block width set auto will expand full space of his parent element.But a block height set auto will only expand needed space of his content.

<style>
    #outer{
        width: 500px;
        height: 500px;
        border: solid 2px black;
    }
    #inner{
        width: auto;
        height: auto;
        background-color: aqua;
    }
</style>
<div id="outer">
<div id="inner">content</div>
</div>