display

Resumo

A propriedade CSS  display especifica o tipo de caixa de renderização usada por um elemento. No HTML, os valores padrões da propriedade  display são feitas a partir do comportamento descrito nas especificações HTML ou da folha de estilo padrão do navegador/usuário. O valor padrão em XML é inline.

Além dos muitos tipos diferentes de exibição de caixa, o valor  none permite desativar a exibição de um elemento; quando você usa none, todos os elementos descendentes também tem a sua exibição desativada. O documento é renderizado como se o elemento não existisse na árvore do documento.

Initial valueinline
Aplica-se aall elements
Inheritednão
Computed valueas the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified.
Animation typediscrete

Sintaxe

Sintaxe formal: 
[ (en-US) <display-outside> || (en-US) <display-inside> ] (en-US) | (en-US) <display-listitem> | (en-US) <display-internal> | (en-US) <display-box> | (en-US) <display-legacy>

where
<display-outside> = block | (en-US) inline | (en-US) run-in
<display-inside> = flow | (en-US) flow-root | (en-US) table | (en-US) flex | (en-US) grid | (en-US) ruby
<display-listitem> = <display-outside>? (en-US) && (en-US) [ (en-US) flow | (en-US) flow-root ] (en-US)? (en-US) && (en-US) list-item
<display-internal> = table-row-group | (en-US) table-header-group | (en-US) table-footer-group | (en-US) table-row | (en-US) table-cell | (en-US) table-column-group | (en-US) table-column | (en-US) table-caption | (en-US) ruby-base | (en-US) ruby-text | (en-US) ruby-base-container | (en-US) ruby-text-container
<display-box> = contents | (en-US) none
<display-legacy> = inline-block | (en-US) inline-list-item | (en-US) inline-table | (en-US) inline-flex | (en-US) inline-grid

display: none

display: inline
display: block
display: list-item
display: inline-block
display: inline-table
display: table
display: table-cell
display: table-column
display: table-column-group
display: table-footer-group
display: table-header-group
display: table-row
display: table-row-group
display: flex
display: inline-flex
display: grid
display: inline-grid
display: run-in

display: inherit

Valores

display-value

É a palavra-chave para definir tipo de renderização que será usada no elemento. Os valores possiveis e seus significados são:
Value set Value Description
Valores Básicos (CSS 1) none

Desabilita a exibição do elemento (sem afetar o layout); todos os elementos filhos também tem sua exibição desabilitada. O documento é renderizado como se o elemento não existisse.

Para renderizar as dimensões de caixa do elemento, tendo ainda seu conteúdo "invisivel", veja a propriedade visibility.

inline O elemento gera uma ou mais caixas de elementos inline.
block O elemento gera uma caixa de elemento de bloco.
list-item O elemento gera uma caixa de bloqueio para o conteúdo e uma caixa embutida de item de lista separada.
Valores estendidos(CSS 2.1) inline-block O elemento gera uma caixa de elemento de bloco que fluirá com o conteúdo circundante, como se fosse uma única caixa embutida (se comportando como um elemento substituído)
Valores do modelo de tabela(CSS 2.1) inline-table O inline-table O valor não possui um mapeamento direto em HTML. Se comporta como um<table> HTML elemento, mas como uma caixa embutida, em vez de uma caixa no nível do bloco. Dentro da caixa da tabela há um contexto em nível de bloco.
table Comporta-se como o<table> HTML elemento. Ele define uma caixa no nível do bloco.
table-caption Comporta-se como o<caption> HTML elemento.
table-cell Comporta-se como o <td> (en-US) HTML elemento
table-column Esses elementos se comportam como o correspondente <col> HTML elementos.
table-column-group Esses elementos se comportam como o correspondente<colgroup> (en-US) HTML elementos.
table-footer-group Esses elementos se comportam como o correspondente <tfoot> HTML elementos
table-header-group Esses elementos se comportam como o correspondente<thead> (en-US) HTML elementos
table-row Comporta-se como o <tr> (en-US) HTML elemento
table-row-group Esses elementos se comportam como o correspondente <tbody> (en-US) HTML elementos
Valores do modelo Flexbox (CSS3) flex O elemento se comporta como um elemento de bloco e apresenta seu conteúdo de acordo com o modelo flexbox.
inline-flex O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo flexbox.
Valores do modelo de caixa de grade (CSS3) This is an experimental API that should not be used in production code. grid

O elemento se comporta como um elemento de bloco e apresenta seu conteúdo de acordo com o modelo de grade.

Como isso é experimental, a maioria dos navegadores não suporta. Preste atenção especialmente que -moz-grid não é a versão prefixada disso, mas um modelo de layout XUL que não deve ser usado em um site.
inline-grid O elemento se comporta como um elemento embutido e apresenta seu conteúdo de acordo com o modelo de grade.
Valores experimentais This is an experimental API that should not be used in production code. run-in
  • Se a caixa de entrada contiver uma caixa de bloco, o mesmo que bloco.
  • Se uma caixa de bloco segue a caixa de introdução, a caixa de introdução torna-se a primeira caixa embutida da caixa de bloco.
  • Se uma caixa embutida se seguir, a caixa de introdução se tornará uma caixa de bloco.

Exemplos

Ver exemplos ao vivo

p.secret  { display: none }
<p style="display:none"> invisible text </p>

Especificações

Specification Status Comment
CSS Basic Box Model
The definition of 'display' in that specification.
Candidata a Recomendação Adicionado o run-in valor.
CSS Grid Layout
The definition of 'display' in that specification.
Candidata a Recomendação Adicionado os valores do modelo da caixa de grade.
CSS Flexible Box Layout Module
The definition of 'display' in that specification.
Candidata a Recomendação Adicionado os valores do modelo de caixa flexível.
CSS Level 2 (Revision 1)
The definition of 'display' in that specification.
Recomendação Foram adicionados os valores do modelo de tabela e inline-block.
CSS Level 1
The definition of 'display' in that specification.
Recomendação Valores básicos:none, block, inline, e list-item.

Navegadores compatíveis 

Estamos convertendo nossos dados de compatibilidade para o formato JSON. Esta tabela de compatibilidade ainda usa o formato antigo, pois ainda não convertemos os dados que ela contém. Descubra como você pode ajudar! (en-US)

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
none, inline e block 1.0 1.0 (1.0) 4.0 7.0 1.0 (85)
inline-block 1.0 3.0 (1.9) 5.5 (-7.0)
apenas elementos inline naturais
7.0 1.0 (85)
list-item 1.0 1.0 (1.0) 6.0 7.0 1.0 (85)
run-in This is an experimental API that should not be used in production code. 1.0
Não antes dos elementos inline
Não suportado 8.0 7.0 1.0 (85)
Não antes dos elementos inline

4.0

Removido em 32

5.0 (532.5)
inline-table 1.0 3.0 (1.9) 8.0 7.0 1.0 (85)
table, table-cell, table-column, table-colgroup, table-header-group, table-row-group, table-footer-group, table-row, and table-caption 1.0 1.0 (1.0) 8.0 7.0 1.0 (85)
flex 21.0-webkit (en-US) 18.0 (18.0)(behind a pref) [1] Não suportado 12.50 Não suportado
inline-flex 21.0-webkit (en-US) 18.0 (18.0)(behind a pref) [1] Não suportado 12.50 Não suportado
grid This is an experimental API that should not be used in production code. ? Não suportado 10.0-ms (en-US) ? ?
inline-grid This is an experimental API that should not be used in production code. ? Não suportado 10.0-ms (en-US) ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Suporte básico ? ? ? ? ?

[1] Para ativar o suporte ao flexbox, no Firefox 18 e 19, o usuário precisa alterar a preferência about: config "layout.css.flexbox.enabled" para true. O flexbox de várias linhas é suportado desde Firefox 28.

Veja mais