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 value | inline |
---|---|
Aplica-se a | all elements |
Inherited | não |
Computed value | as 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 type | Not 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 elementotable-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 elementostable-header-group
Esses elementos se comportam como o correspondente <thead>
(en-US) HTML elementostable-row
Comporta-se como o <tr>
(en-US) HTML elementotable-row-group
Esses elementos se comportam como o correspondente <tbody>
(en-US) HTML elementosValores 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
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
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.