This page was translated from English by the community. Learn more and join the MDN Web Docs community.

height

Resumen

La propiedad CSS height especifica la altura del area de contenido de un elemento. El área de contenido está dentro del padding, borde, y margen del elemento.

Las propiedades min-height y max-height sobreescriben el valor de height.

Valor inicialauto
Applies toelementos de bloque o remplazados
Heredableno
PercentagesThe percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto. A percentage height on the root element is relative to the initial containing block.
Valor calculadoa percentage or auto or the absolute length
Animation typea length, percentage or calc();

Sintaxis

/* Valores clave */
height: auto;

/* Valores <length> */
height: 120px;
height: 10em;

/* Valores <percentage> */
height: 75%;

/* Valores globales */
height: inherit;
height: initial;
height: unset;

Valores

<length>
Ver <length> para unidades disponibles.
<percentage>
Especificado con el tipo <percentage> como porcentaje de la altura del bloque contenedor
border-box 
Si está presente, el valor <length> o <percentage> precedente es aplicado a los límites del borde del elemento.
content-box 
Si está presente, el valor <length> o <percentage> precedente será aplicado a los límites de contenido del elemento.
auto
El navegador calculará y seleccionará la altura para el elemento especificado.
fill
Use el tamaño fill-available para elementos inline o block, según sea más apropiado para el modo de escritura.
max-content 
La altura preferida intrínseca.
min-content 
La altura mínima intrínseca.
available 
La altura del bloque contenedor menos su margen vertical, borde y padding.
fit-content 
El mayor entre:
  • la altura mínima intrínseca
  • la menor entre la altura prefereida intrínseca y la altura disponible

Sintaxis formal

auto | (en-US) <length> | (en-US) <percentage> | (en-US) min-content | (en-US) max-content | (en-US) fit-content | (en-US) fit-content(<length-percentage>)
where 
<length-percentage> = <length> | (en-US) <percentage>

Ejemplo

HTML

<div id="red">
  <span>I'm 50 pixels tall.</span>
</div>
<div id="green">
  <span>I'm 25 pixels tall.</span>
</div>
<div id="parent">
  <div id="child">
    <span>I'm half the height of my parent.</span>
  </div>
</div>

CSS

div {
  width: 250px;
  margin-bottom: 5px;
  border: 3px solid #999999;
}

#red {
  height: 50px;
}

#green {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}

Especificaciones

Especificación Estado Comentarios
CSS Box Model
La definición de 'height' en esta especificación.		 Candidate Recommendation Añade las palabras clave max-content, min-content, available, fit-content, border-box, content-box.
CSS Transitions
La definición de 'height' en esta especificación.		 Working Draft Incluye height como propiedad que puede ser animada.
CSS Level 2 (Revision 1)
La definición de 'height' en esta especificación.		 Recommendation Añade soporte para valores <length> y especifica a qué elementos es aplicable.
CSS Level 1
La definición de 'height' en esta especificación.		 Recommendation Definición inicial
CSS Box Sizing Module Level 3
La definición de 'width' en esta especificación.		 Working Draft Añade nuevas palabras clave de tamaño para width y height

Compatibilidad de navegadores

BCD tables only load in the browser

Véase también