| Definición | Establece la altura de los elementos de bloque |
|---|---|
| Valores permitidos | Uno y sólo uno de los siguientes valores: |
Si se utilizan porcentajes, hace referencia a la altura del elemento en el que se encuentra. Si este elemento contenedor no tiene establecida una altura de forma explícita y el elemento para el que se define la altura no está posicionado de forma absoluta, se ignora la altura en porcentaje y se sustituye por el valor auto | |
| Valor inicial | auto |
| Se aplica a | Todos los elementos, salvo los elementos en línea que no sean imágenes, las columnas de tabla y los grupos de columnas de tabla. |
| Válida en | medios visuales |
| Se hereda | no |
| Definición en el estándar | w3.org/TR/CSS21/visudet.html#propdef-height |
Ejemplos de uso
Para los elementos de bloque y las imágenes, la propiedad height permite establecer su altura directamente mediante una unidad de medida. El siguiente ejemplo establece la altura a un <div> para que no se muestre con la altura por defecto calculada por el navegador:
Las imágenes son el único elemento en línea para el que se tiene en cuenta la propiedad height. Por lo tanto, establecer la propiedad height de CSS es equivalente a establecer el atributo height de HTML.
El siguiente ejemplo muestra la imagen con una altura de 80px, independientemente de la altura real que tenga la imagen:
La propiedad height no funciona con los elementos en línea que no son imágenes. En el siguiente ejemplo, a pesar de que a cada enlace se le asigna una altura diferente, el navegador los muestra todos con la misma altura:
(height: 40px) Lorem ipsum dolor sit amet
(height: 60px) Lorem ipsum dolor sit amet
Si se utilizan unidades de medida, los valores indicados no pueden ser negativos. El uso de porcentajes para definir la altura de los elementos no es tan sencillo como cuando se utiliza para definir su anchura.
Cuando un elemento establece su altura mediante un porcentaje, la referencia que se toma es la altura de su elemento contenedor. Sin embargo, si ese elemento contenedor no tiene establecida una altura de forma explícita, se ignora la altura en porcentaje y se sustituye por el valor auto.
En el siguiente ejemplo, los dos elementos <div> interiores tienen la misma altura del 50%. Sin embargo, sólo el primer <div> se ve correctamente, ya que sólo el primer elemento contenedor tiene establecida su altura de forma explícita. La altura del segundo <div> se ignora y se sustituye por el valor auto:
div { height: 150px; }
div { height: auto; }
Si se establece la altura de un elemento con la unidad de medida em, la referencia que se toma es el tamaño de letra del propio elemento. En el siguiente ejemplo, los dos <div> tienen el mismo valor en la propiedad height, pero como su tamaño de letra es muy diferente, su altura también es muy diferente:
El valor auto es el valor por defecto de la altura de todos los elementos. En este caso, el navegador determina la altura de cada elemento teniendo en cuenta, entre otros, el tipo de elemento que se trata (de bloque o en línea), el sitio disponible en la pantalla del navegador y los contenidos de los elementos.
Por último, recuerda que el valor de la propiedad height siempre hace referencia a la altura del contenido de cada elemento. Si se añaden márgenes, bordes y rellenos, la altura total con la que se muestra el elemento será mayor que el valor de la propiedad height: