height
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
* Some parts of this feature may have varying levels of support.
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 min-height e max-height sobrepõem a height.
| Initial value | auto |
|---|---|
| Aplica-se a | all elements but non-replaced inline elements, table columns, and column groups |
| Inherited | não |
| Percentages | The 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. |
| Computed value | a percentage or auto or the absolute length |
| Animation type | a length, percentage or calc(); |
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
<length>para unidades disponíveis. <percentage>-
Especificada como uma
<percentage>da altura do conteúdo do bloco. border-boxExperimental-
Se presente, o último
<length>ou<percentage>é aplicado a caixa de borda do elemento. content-boxExperimental-
Se presente, o último
<length>ou<percentage>é aplicado a caixa de conteúdo do elemento. auto-
O navegador calculará a altura do conteúdo especificado.
max-contentExperimental-
A altura máxima intrínseca.
min-contentExperimental-
A altura mínima intrínseca.
availableExperimental-
Altura da caixa menos margem vertical, borda e padding.
fit-contentExperimental-
O maior de:
- a altura mínima intrínseca
- a menor entre a altura intrínseca preferida e a altura disponível
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%;
}
Especificações
| Specification |
|---|
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |
Compatibilidade com navegadores
Loading…