CSS height, width y max-width

Las propiedades height y width de CSS se utilizan para establecer el alto y el ancho de un elemento. La propiedad max-width de CSS se utiliza para establecer el ancho máximo de un elemento.

CSS Configuración de height y width

Las propiedades height y width se utilizan para establecer el alto y el ancho de un elemento. Dichas propiedades no incluyen relleno, bordes ni márgenes. Establece el alto/ancho del área dentro del relleno, el borde y el margen del elemento.

Valores de las propiedades height y width

Los valores que se pueden dar en dichas propiedades pueden ser los siguientes:

  • auto: esto es predeterminado. El navegador calcula la altura y la anchura.
  • longitud: define el alto/ancho en px, cm, etc.
  • % (porcentaje): define el alto/ancho en porcentaje del bloque contenedor
  • initial: establece el alto/ancho a su valor predeterminado
  • inherit: el alto/ancho se heredará de su valor principal

Ejm

div {
  height: 200px;
  width: 50%;
  background-color: powderblue;
}

Configuración max-width

La propiedad max-width se utiliza para establecer el ancho máximo de un elemento. max-width se puede especificar en valores de longitud, como px, cm, etc., o en porcentaje (%) del bloque contenedor, o establecerse en none (esto es predeterminado. Significa que no hay un ancho máximo).

El problema con el <div> anterior ocurre cuando la ventana del navegador es más pequeña que el ancho del elemento (500 px). 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 de ventanas pequeñas por parte del navegador.

Nota: si por alguna razón usas tanto la propiedad width como la propiedad max-width en el mismo elemento, y el valor de la propiedad width es mayor que la propiedad max-width; se usará la propiedad max-width (y se ignorará la propiedad width).

Ejm

div {
  max-width: 500px;
  height: 100px;
  background-color: powderblue;
}

Todas las propiedades de dimensión de CSS

Propiedad Descripción
height Establece la altura de un elemento.
max-height Establece la altura máxima de un elemento.
max-width Establece el ancho máximo de un elemento.
min-height Establece la altura mínima de un elemento.
min-width Establece el ancho mínimo de un elemento.
width Establece el ancho de un elemento.