--- title: height slug: Web/CSS/height tags: - CSS - CSS Property - Reference translation_of: Web/CSS/height ---
{{CSSRef}}

La propietat CSS height especifica l'alçada d'un element. Per defecte, la propietat defineix l'alçada de l'àrea de contingut. Si {{cssxref("box-sizing")}} s'estableix a border-box, aquest determina l'alçada de l'àrea de vora.

/* Keyword value */
height: auto;

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

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

/* Global values */
height: inherit;
height: initial;
height: unset;

Les propietats {{cssxref("min-height")}} i {{cssxref("max-height")}} anul·la {{Cssxref("height")}}.

{{cssinfo}}

Sintaxi

Valors

{{cssxref("<length>")}}
Defineix l'alçada com un valor absolut.
{{cssxref("<percentage>")}}
Defineix l'alçada com un percentatge de l'alçada del bloc contenidor.
border-box {{experimental_inline}}
Si està present, s'aplica abans {{cssxref("<length>")}} o {{cssxref("<percentage>")}} a la caixa de vora de l'element.
content-box {{experimental_inline}}
Si està present, s'aplica abans {{cssxref("<length>")}} o {{cssxref("<percentage>")}} a la caixa de contingut de l'element.
auto
El navegador calcularà i seleccionarà una alçada per a l'element especificat .
fill {{experimental_inline}}
Utilitzeu la grandària fill-available en línia o la grandària fill-available del bloc, segons correspongui a la modalitat d'escriptura.
max-content {{experimental_inline}}
L'alçada preferida intrínseca.
min-content {{experimental_inline}}
L'alçada mínima intrínseca.
available {{experimental_inline}}
L'alçada del bloc contenidor menys el marge vertical, la vora i el farciment.
fit-content {{experimental_inline}}
El més gran de:

Sintaxi formal

{{csssyntax}}

Exemple

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%;
}

{{EmbedLiveSample('Example')}}

Especificacions

Especificació Estat Comentari
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}} {{Spec2('CSS3 Box')}} S'han afegit les paraules clau max-content, min-content, available, fit-content, border-box, content-box
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}} {{Spec2('CSS3 Transitions')}} Mostra height com a animable.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}} {{Spec2('CSS2.1')}} Afegeix suport per als valors {{cssxref("<length>")}} i especifica en quin element s'aplica.
{{SpecName('CSS1', '#height', 'height')}} {{Spec2('CSS1')}} Definició inicial
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}} {{Spec2('CSS3 Sizing')}} Afegeix noves paraules clau de grandària per width i height.

{{CompatibilityTable}}

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0 {{CompatVersionUnknown}} {{CompatGeckoDesktop("1")}} 4.0 7.0 1.0
fill, fit-content, min-content, max-content {{CompatChrome(46.0)}} {{CompatUnknown}}        
Descripció Android Android Webview Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile Chrome for Android
Suport bàsic 1.0 {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile("1")}} 6.0 6.0 1.0 {{CompatVersionUnknown}}
fill, fit-content, min-content, max-content {{CompatUnknown}} {{CompatChrome(46.0)}} {{CompatUnknown}}         {{CompatChrome(46.0)}}

Vegeu també