Altura - Trucos CSS

Tabla de contenido

La heightpropiedad en CSS define especifica la altura del contenido de los cuadros y acepta cualquiera de los valores de longitud.

El área de "contenido" se define como el relleno y el borde, además del alto / ancho o tamaño que ocupa el contenido.

height: -100pxNo se aceptan valores negativos como . La heightpropiedad no se aplica a los elementos en línea no reemplazados, incluidas las columnas de la tabla y los grupos de columnas.

.wrap ( height: auto; /* auto keyword */ height: 120px; /* length values */ height: 10em; height: 0; /* unit-less length is OK for zero */ height: 75%; /* percentage value */ height: inherit; /* inherited value from parent element */ )
¡Mira este bolígrafo!

Si la altura del bloque contenedor no se especifica explícitamente y el elemento no está absolutamente posicionado, el valor de su altura se calcula automáticamente (será tan alto como el contenido dentro de él, o cero si no hay contenido). Si la porción del contenido de los elementos requiere más espacio vertical que el disponible del valor asignado, el comportamiento de los elementos lo define la overflowpropiedad.

Cuando se utiliza la palabra clave auto, heightse calcula en función del área de contenido de los elementos a menos que se especifique explícitamente. Esto significa que un valor basado en un porcentaje sigue siendo el del área de contenido de elementos. De manera similar, si la altura del contenedor se establece en un valor porcentual, la altura porcentual de un elemento secundario todavía se basa en el área de contenido de ese elemento secundario.

La altura también se puede utilizar como una propiedad animable.

Soporte de navegador

ES DECIR Borde Firefox Cromo Safari Ópera
Todos Todos Todos Todos Todos Todos
Android Chrome Android Firefox Navegador de Android Safari de iOS Opera Mobile
Todos Todos Todos Todos Todos
Fuente: caniuse

Propiedades relacionadas

Almanaque el 15 de enero de 2021

Altura máxima

.element ( max-height: 3rem; ) Sara Cope

Articulos interesantes...