Dimensiones de Alto y Ancho con Mínimo y Máximo CSS

Como mencionamos en el capitulo anterior una etiqueta con nivel de bloque toma todo el ancho disponible.

Especificar el ancho de una etiqueta de nivel de bloque, evitará que se extienda hasta los bordes de su contenedor. Entonces, se puedes especificar el margin a auto para centrarlo horizontalmente de su etiqueta contenedor. La etiqueta ocupará el ancho especificado y el espacio restante será dividido equitativamente para los dos márgenes.

div.muestra1 {
  width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

Nota: Un problema ocurre cuando la ventana del navegador web es más pequeña que el ancho especificado para la etiqueta. El navegador web agrega una barra de desplazamiento horizontal a la página para cubrir el ancho excedido.

Ahora, si en lugar de usar width usamos la propiedad max-width mejoraremos el manejo de los navegadores web en ventanas más pequeñas que el especificado. Esto es importante cuando se accede al sitio desde dispositivos pequeños como smartphone o tablet.

div.muestra2 {
  max-width: 500px;
  margin: auto;
  border: 3px solid #73AD21;
}

Las propiedades min-height y max-height funcionan de igual manera pero para la altura de la etiqueta.