What Is the Meaning of 'Auto' Value in a CSS Property

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

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.

What is the meaning of 'auto' value in 'left' property of css?

From the left documentation:

auto specifies that:
for absolutely positioned elements, the position of the element is based on the right property, while width: auto is treated as a width based on the content; or if right is also auto, the element is positioned where it should horizontally be positioned if it were a static element.
for relatively positioned elements, the distance of the element from its normal position is based on the right property; or if right is also auto, the element is not moved horizontally at all.

What exactly does the 'auto' value mean for the CSS height property?

What does it mean browser calculates the height?

It means the browser will make the element's height sufficient to fit its content.

Does it mean it just simply sums up the contained elements heights if they are up on each other?

Nope, it is more complicated than that, but I'm sure that is part of it.

Is this always calculated with the same method for all browsers?

No, there are generally small variances. You should calculate the element's height in JavaScript if you intend to perform calculations based on it, don't assume it will have the same height on all browsers.

What does margin auto mean?

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

What does auto and content value of flex-basis do

The only difference in the behavior of those two values is what they do when the width property is defined for the element.

`flex-basis: content`

The "content" value will just set the width according to the element's content. It doesn't matter if you've defined a width for the element through the width property, it would be ignored.

ul {
  display: flex;
  list-style-type: none;
}
ul li {
  background-color: green;
  margin: 5px;
  width: 100px;
  flex-basis: content;
}

<html>
  <body>
    <ul>
      <li>Element</li>
      <li>Element</li>
      <li>Element</li>
    </ul>
  </body>
</html>

What does auto do in margin: 0 auto?

When you have specified a width on the object that you have applied margin: 0 auto to, the object will sit centrally within it's parent container.

Specifying auto as the second parameter basically tells the browser to automatically determine the left and right margins itself, which it does by setting them equally. It guarantees that the left and right margins will be set to the same size. The first parameter 0 indicates that the top and bottom margins will both be set to 0.

margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;

Therefore, to give you an example, if the parent is 100px and the child is 50px, then the auto property will determine that there's 50px of free space to share between margin-left and margin-right:

var freeSpace = 100 - 50;
var equalShare = freeSpace / 2;

Which would give:

margin-left: 25;
margin-right: 25;

Have a look at this jsFiddle. You do not have to specify the parent width, only the width of the child object.

Can I use the auto value with the calc() property?

Looking at my own question today, I feel ashamed why I couldn't think it correctly? Basically, auto margin is what left margin 50% minus width of the div. In this basis, we can layout the element like this:

margin-left: calc(50% + 5px);
transform: translateX(-50%);

Using the preceding code is equivalent to calc(auto + 5px);. Since, calc doesn't support auto we need to trick with actual concept of translation. This means we can also layout with absolute position with the concept of 50% - half of width, but I like transform here for simplicity.

See the demo below:

.parent{  position: relative;}.child{  border: 2px solid green;  width: 25%;  height: 50px;  margin: 10px auto;}.right{  margin-left: calc(50% + 20px);  transform: translateX(-50%);}.left{  margin-left: calc(50% - 20px);  transform: translateX(-50%);}#border{  height: 100%;  border: 1px solid yellow;  width: 25%;  margin: auto;  position: absolute;  z-index: -1;  top: 0;  left: 0;  right: 0;}

<div class="parent">  <div id="auto" class="child">    auto margin  </div>  <div id="auto-right" class="child right">    auto + pushed to right  </div>  <div class="child left">    auto + pushed to left  </div>  <div id="border"></div></div>

What Is the Meaning of 'Auto' Value in a CSS Property