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?

The behavior of `auto` in CSS depends on the attribute you are assigning to. You will have to provide an example of which attribute you are interested in if you would like a more specific answer. — cdhowie, Dec 17 '10 at 15:17

score 99 · Accepted Answer · answered Dec 17 '10 at 15:16

99

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.

answered Dec 17 '10 at 15:16

BoltClock

700,868
160
1,392
1,356

8

@MarceloBarbosa: Nope, even in properties that accept both values auto does not always mean 100%. A 100% width for example forces an inline-block element to be 100% of its container width, even if there are other elements on the same line (those elements get pushed to the next line instead). An auto width causes an inline-block to shrink to fit its contents, which is certainly not 100%. – BoltClock Jul 15 '14 at 05:35
Is 'auto' the default value for all? Can every property have the value 'auto'? – robsch Feb 20 '18 at 10:45
@robsch: No, whether or not a property has auto as a possible value, let alone the initial value, depends entirely on the property. For most properties, an auto value flat-out makes no sense. – BoltClock Feb 20 '18 at 10:46

score 16 · Answer 2 · edited Jun 02 '20 at 07:58

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>

score 4 · Answer 3 · answered Jan 10 '21 at 18:34

It depends. Here are some common usages of the auto value.

Height: auto

the element height depend upon the height of its children.

.container {
  width: 250px;
  height: auto;
  background: gray;
}

.item {
  width: 50px;
  background: orange;
}

<div class="container">
  <div class="item">
    child content
  </div>
</div>

Width: auto

for block level element the width is the container width subtracted the element's horizontal spacing (margin+border+padding).

.container {
  width: 250px;
  height: 150px;
  background: gray;
}

.item {
  width: auto;
  margin: 0 10px;
  border-left: 5px solid;
  border-right: 5px solid;
  padding: 0 10px;
  background: orange;
  font-size: 14px;
}

<div class="container">
  <div class="item">
    calculated content width is 200px
  </div>
</div>

note that the behaviour is different when the container is flex with align.

.container {
  width: 250px;
  height: 150px;
  display: flex;
  flex-direction: column;
  background: gray;
}

.item {
  width: auto;
  background: orange;
  /* comment out next line to make width take parent's width */
  align-self: start;
}

<div class="container">
  <div class="item">
    child
  </div>
</div>

Margin: auto

center a block level element horizontally.

.container {
  width: 250px;
  height: 150px;
  background: gray;
}

.item {
  width: 32px;
  margin: 0 auto;
  background: orange;
}

<div class="container">
  <div class="item">
    child
  </div>
</div>

push an element to the end inside flex container.

.container {
  width: 300px;
  height: 150px;
  display: flex;
  background: gray;
}

.item {
  width: 50px;
  height: 25px;
  background: orange;
  border-left: 1px solid;
}

.item3 {
  margin-left: auto;
}

<div class="container">
  <div class="item">
    child 1
  </div>
  <div class="item">
    child 2
  </div>
  <div class="item item3">
    child 3
  </div>
</div>

score 2 · Answer 4 · edited Jan 04 '23 at 05:11

It really depends on that attribute you use. For example, a block width set auto will expand full space of its parent element, but a block height set auto will only expand needed space of its 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>

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

4 Answers4

Height: auto

Width: auto

Margin: auto

Linked

Related