height

Baseline

Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.

* Some parts of this feature may have varying levels of support.

See full compatibility
Learn more

La propiedad CSS height especifica la altura de un elemento. Por defecto, la propiedad define la altura del área de contenido. Sin embargo, si box-sizing está configurado como border-box, determina la altura del área de borde.

Pruébalo

height: 150px;

height: 6em;

height: 75%;

height: auto;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    This is a box where you can change the height.
  </div>
</section>

#example-element {
  display: flex;
  flex-direction: column;
  background-color: #5b6dcd;
  justify-content: center;
  color: #ffffff;
}

Las propiedades min-height y max-height anulan a la propiedad height .

Sintaxis

css

/* Valores de longitud */
height: 120px;
height: 10em;

/* Valores de porcentaje */
height: 75%;

/* Valores con palabras clave */
height: max-content;
height: min-content;
height: fit-content(20em);
height: auto;

/* Valores globales */
height: inherit;
height: initial;
height: revert;
height: revert-layer;
height: unset;

Valores

<length>: Define la altura como un valor absoluto.
<percentage>: Define la altura como un porcentaje de la altura del bloque contenedor.
auto: El navegador calculará y seleccionará una altura para el elemento especificado.
max-content: La altura preferida intrínseca.
min-content: La altura mínima intrínseca.