que - selectores css

¿Cuál es el significado del valor `auto` en una propiedad CSS?

Question

¿Cuál es el significado del valor auto de una propiedad CSS? ¿Qué sucede cuando el valor de una propiedad CSS se establece en auto ?

Answer 1

Auto significa automáticamente adjetivo. La razón más común por la que uso auto es:

margin: 0 auto;

Centrar un elemento.

Tenga en cuenta: si el tamaño no se declara, entonces no funcionará.

Ejemplo 1: div no está centrado, el auto no funciona

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

Ejemplo 2: div está centrado a la página

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

Answer 2

El valor de dicha propiedad se ajusta automáticamente de acuerdo con el contenido o el contexto del elemento.

Por ejemplo, un elemento de nivel de bloque con height: auto crecerá más alto a medida que contenga más texto. Para otro ejemplo, un elemento de bloque con margin: 0 auto tendrá los márgenes izquierdo y derecho incrementados hasta que se centre a lo largo del eje y de la ventana gráfica.

Realmente depende de la propiedad a la que le da el valor, diferentes propiedades se comportan de manera diferente dependiendo del contenido y el contexto.

Answer 3

Realmente depende de ese atributo que use. Por ejemplo, un conjunto de ancho de bloque automático expandirá el espacio completo de su elemento padre. Pero un conjunto de altura de bloque automático solo expandirá el espacio necesario de su contenido.

<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>