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. |