html - bootstrap - title css
¿Qué significa margen automático? (3)
Revisé MDN para ver qué significa tener un valor automático para la propiedad de margen y dice: "auto se reemplaza por algún valor adecuado , por ejemplo, se puede usar para centrar bloques".
Pero, ¿cuál es ese valor adecuado, y adecuado para qué?
Probé algunos experimentos y vi que si agrego el margen izquierdo: automático , el contenedor se desplaza a la derecha (como si estuviera flotando a la derecha):
#container {
background: red;
width: 120px;
margin-left: auto;
}
¿Significa que agregar un margen automático es en realidad algo como "tomar todo el espacio disponible"? ¿Y cuando sumas los márgenes izquierdo y derecho, centra el div porque trata de tomar todo el espacio de la izquierda y de la derecha?
Márgenes automáticos
Dependiendo de las circunstancias, la provisión de un valor automático le indica al navegador que genere un margen de acuerdo con el valor proporcionado en su propia hoja de estilo. Sin embargo, cuando dicho margen se aplica a un elemento con un ancho significativo, un margen automático hace que todo el espacio disponible se represente como espacios en blanco.
De w3.org
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 ya que contiene 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.
Referencia - ¿Cuál es el significado del valor `auto` en una propiedad CSS?
#main {
width: 600px;
margin: 0 auto;
}
<div id="main"> Establecer el ancho de un elemento a nivel de bloque evitará que se extienda hacia los bordes de su contenedor hacia la izquierda y la derecha. Luego, puede configurar los márgenes izquierdo y derecho para que centren automáticamente ese elemento dentro de su contenedor. El elemento ocupará el ancho que especifique, luego el espacio restante se dividirá de manera uniforme entre los dos márgenes. </div>