Table of contents
Uso de width, max-width y margin: auto;
Como se mencionó en el capítulo anterior; un elemento de nivel bloque siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como pueda).
Establecer el width (ancho) de un elemento de nivel bloque evitará que se extienda hasta los bordes de su contenedor. Luego, puedes establecer los márgenes en automático, para centrar horizontalmente el elemento dentro de su contenedor. El elemento ocupará el ancho especificado y el espacio restante se dividirá en partes iguales entre los dos márgenes:
Nota: El problema con el
<div>anterior ocurre cuando la ventana del navegador es más pequeña que el ancho del elemento. Luego, el navegador agrega una barra de desplazamiento horizontal a la página.
Usar max-width en su lugar, en esta situación, mejorará el manejo en ventanas pequeñas por parte del navegador. Esto es importante al hacer que un sitio se pueda usar en dispositivos pequeños:
Tip: Cambie el tamaño de la ventana del navegador a menos de
500pxde ancho, para ver la diferencia entre los dos<div>.
Aquí hay un ejemplo de los dos <div> anteriores:
Ejemplo:
Resumen
El uso de max-width en lugar de width permite que los elementos se ajusten mejor a ventanas pequeñas, lo que es importante para la usabilidad en dispositivos móviles. Además, se puede usar margin: auto; para centrar horizontalmente un elemento dentro de su contenedor.
Traducido con 💚 desde W3Schools.com