Las propiedades height y width CSS se utilizan para establecer el alto y el ancho de un elemento. La propiedad max-width se utiliza para establecer el ancho máximo de un elemento.
Estableciendo el alto y ancho
Las propiedades height y width se utilizan para establecer el alto y el ancho de un elemento.
Las propiedades height y width no incluyen relleno, bordes ni márgenes. Establece el alto/ancho del área dentro del relleno, el borde y el margen del elemento.
Valores alto y ancho
Las propiedades height y width pueden tener los siguientes valores:
auto- valor predeterminado. El navegador calcula la altura y la anchura.length - define el alto/ancho en
px,cm, etc.%- define el alto/ancho en porcentaje del bloque contenedor.initial- establece el alto/ancho a su valor predeterminado.inherit- la altura/anchura se heredará de su valor principal.
Alto y ancho con ejemplos
Ejemplo:
Establezca el alto y ancho de un elemento <div>:
Ejemplo:
Establezca el alto y ancho de otro elemento <div>:
Nota: Recuerde que las propiedades
heightywidthno incluyen relleno, bordes ni márgenes. Establecen el alto/ancho del área dentro del relleno, el borde y el margen del elemento.
Estableciendo el ancho máximo
La propiedad max-width se utiliza para establecer el ancho máximo de un elemento.
La propiedad max-width se puede especificar con valores de longitud, como px, cm, etc., o en porcentaje (%) según el bloque que lo contiene, o no establecer ninguno (esto es predeterminado, significa que no hay un ancho máximo).
El problema con el elemento <div> anterior ocurre cuando la ventana del navegador es más pequeña que el ancho del elemento (500px). Es así que el navegador agrega una barra de desplazamiento horizontal a la página.
Usar max-width en su lugar, mejorará el manejo en ventanas pequeñas por parte del navegador.
Tip: Reduce la ventana del navegador a un ancho inferior a
500pxpara ver la diferencia entre los dos elementos<div>.Nota: Si por alguna razón usas las dos propiedades
widthymax-widthen el mismo elemento, y el valor de la propiedadwidthes mayor que la propiedadmax-width; se usará la propiedadmax-width(y se ignorará la propiedad width).
Ejemplo:
Todas las propiedades
| 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. |
Resumen
La propiedad height y width se utilizan para establecer el alto y ancho de un elemento en CSS. Estas propiedades no incluyen relleno, bordes ni márgenes. La propiedad max-width se utiliza para establecer el ancho máximo de un elemento. También se pueden establecer propiedades como max-height, min-height y min-width.
Traducido con 💚 desde W3Schools.com