--- title: height slug: Web/CSS/height translation_of: Web/CSS/height ---
{{CSSRef()}}

Sumário

A propriedade height do CSS determina a altura da área do conteúdo de um elemento. A área de conteúdo consiste no padding, margin e border do elemento.

As propriedades {{Cssxref("min-height")}} e {{Cssxref("max-height")}} sobrepõem a {{Cssxref("height")}}.

{{cssinfo}}

Sintaxe

Sintaxe formal: [<length> | <percentage>] && [border-box | content-box]? | available | min-content | max-content | fit-content | complex | auto

height: auto     /* auto keyword */

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

height: 75%      /* <percentage> values */

height: inherit

Valores

<length>
Veja {{cssxref("<length>")}} para unidades disponíveis.
<percentage>
Especificada como uma {{cssxref("<percentage>")}} da altura do conteúdo do bloco.
border-box {{ experimental_inline }}
Se presente, o último {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado a  caixa de borda do elemento.
content-box {{ experimental_inline }}
Se presente, o último {{cssxref("<length>")}} ou {{cssxref("<percentage>")}} é aplicado a caixa de conteúdo do elemento.
auto
O navegador calculará a altura do conteúdo especificado.
max-content {{ experimental_inline }}
A altura máxima intrínseca.
min-content {{ experimental_inline }}
A altura mínima intrínseca.
available {{ experimental_inline }}
Altura da caixa menos margem vertical, borda e padding.
fit-content {{ experimental_inline }}
O maior de:

Exemplos

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('Exemplos')}}

Especificações

Specification Status Comment
{{SpecName('CSS3 Box', '#the-width-and-height-properties', 'height')}} {{Spec2('CSS3 Box')}} Added the max-content, min-content, available, fit-content, border-box, content-box keywords.
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}} {{Spec2('CSS3 Transitions')}} Lists height as animatable.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}} {{Spec2('CSS2.1')}} Adds support for the {{cssxref("<length>")}} values and precises on which element it applies to.
{{SpecName('CSS1', '#height', 'height')}} {{Spec2('CSS1')}} Initial specification.

Compatibilidade com navegadores

{{CompatibilityTable()}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suporte básico 1.0 {{CompatGeckoDesktop("1")}} 4.0 7.0 1.0
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico 1.0 {{CompatGeckoMobile("1")}} 6.0 6.0 1.0

Veja também