AtoZ CSS: The CSS Value of Auto

Auto is a CSS value that has a number of uses.

It’s the default value for a lot of box-model properties like width, height, margin, and background-size.

[code language="css"]
.box {
width: auto;
height: auto;
margin: auto;
background-size: auto auto;
}
[/code]

It’s also the default value for position properties like top and bottom, left and right and z-index.

[code language="css"]
.box {
position: relative|absolute|fixed;
top: auto;
right: auto;
bottom: auto;
left: auto;
z-index: auto;
}
[/code]

There’s other more obscure places that auto can be used as well, like overflow, cursor, table-layout and the column-width property of CSS columns.

[code language="css"]
.box {
overflow: auto;
cursor: auto;
table-layout: auto;
column-width: auto;
}
[/code]

Broadly speaking, the value of auto is automatically computed by the user-agent and the specific effect depends on the content and context that it’s used in.

Let’s look at an example…

[code language="css"]
.box {
width: auto;
height: auto;
}
[/code]

Continue reading %AtoZ CSS: The CSS Value of Auto%

by Guy Routledge via SitePoint