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 typeNot animatable

Sintaxe

Sintaxe formal: 
display = 
[ <display-outside> || <display-inside> ] |
<display-listitem> |
<display-internal> |
<display-box> |
<display-legacy>

<display-outside> =
block |
inline |
run-in

<display-inside> =
flow |
flow-root |
table |
flex |
grid |
ruby

<display-listitem> =
<display-outside>? &&
[ flow | flow-root ]? &&
list-item

<display-internal> =
table-row-group |
table-header-group |
table-footer-group |
table-row |
table-cell |
table-column-group |
table-column |
table-caption |
ruby-base |
ruby-text |
ruby-base-container |
ruby-text-container

<display-box> =
contents |
none

<display-legacy> =
inline-block |
inline-table |
inline-flex |
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) Experimental 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 Experimental 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 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 Experimental 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 Experimental ? Não suportado 10.0-ms (en-US) ? ?
inline-grid Experimental ? 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