Diseño de CSS - Anchura y max-width

Usar width, max-width y margin: auto;

Como se mencionó en el capítulo anterior, los elementos de bloque siempre ocupan toda la anchura disponible (se extienden lo más posible a la izquierda y a la derecha).

Configurar el ancho de un elemento de bloque width Esto evitará que se extienda al borde de su contenedor. Luego, puede configurar el margen en auto para centrar el elemento horizontalmente en su contenedor. El elemento ocupará el ancho especificado, y el espacio restante se distribuirá de manera equitativa entre los márgenes:

El ancho de este elemento <div> es de 500px, y el margen está configurado en auto.

Atención:Cuando la ventana del navegador es más pequeña que el ancho del elemento, la siguiente <div> se producirá un problema. El navegador añadirá una barra de desplazamiento horizontal a la página.

En este caso, usar max-width Esto puede mejorar el manejo del navegador de ventanas pequeñas. Es importante para que el sitio sea accesible en dispositivos pequeños:

El elemento <div> tiene un ancho máximo de 500px y el margen se establece en auto.

Consejo:¡Ajuste el tamaño de la ventana del navegador a menos de 500 píxeles para ver la diferencia entre los dos div!

Este es el ejemplo de los dos div anteriores:

Ejemplo

div.ex1 {
  ancho: 500px;
  margen: auto;
  border: 3px sólido #73AD21;
}
div.ex2 {
  max-width: 500px;
  margen: auto;
  border: 3px sólido #73AD21;
}

Prueba personal