Diseño CSS : ancho y ancho máximo
Uso de ancho, ancho máximo y margen: automático;
Como se mencionó en el capítulo anterior; un elemento a nivel de bloque siempre ocupa todo el ancho disponible (se extiende hacia la izquierda y hacia la derecha tanto como puede).
La configuración widthde un elemento a nivel de bloque evitará que se extienda hasta los bordes de su contenedor. Luego, puede 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 lo <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-widthen su lugar, en esta situación, mejorará el manejo de las ventanas pequeñas por parte del navegador. Esto es importante al hacer que un sitio se pueda usar en dispositivos pequeños:
Consejo: cambie el tamaño de la ventana del navegador a menos de 500 px de ancho, para ver la diferencia entre los dos divs.
Aquí hay un ejemplo de los dos divs anteriores:
Ejemplo
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}