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 lo más que puede).
Establecer el ancho de un elemento a nivel de bloque evitará que se estire hasta los bordes de su contenedor. Luego, puede configurar el márgenes a automático, para centrar horizontalmente el elemento dentro de su contenedor. El El elemento ocupará el ancho especificado y el espacio restante se dividirá. igualmente entre los dos márgenes:
Nota: El problema con el <div> anterior ocurre cuando la ventana del navegador está menor que el ancho de el 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á la Manejo de ventanas pequeñas por parte del navegador. Esto es importante a la hora de hacer que un sitio sea utilizable. en dispositivos pequeños:
Consejo: Cambie el tamaño de la ventana del navegador a menos de 500 píxeles de ancho para ver la diferencia entre los dos divs!
Aquí hay un ejemplo de los dos divs anteriores:
div.ex1 {
width: 500px;
margin:
auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}Pruébelo usted mismo →
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
div.ex2 {
max-width: 500px;
margin: auto;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>CSS Max-width</h2>
<div class="ex1">This div element has width: 500px;</div>
<br>
<div class="ex2">This div element has max-width: 500px;</div>
<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between
the two divs!</p>
</body>
</html>