display

Resumo

Esta propriedade especifica o tipo de caixa de renderização usado para um elemento. Em uma linguagem como o HTML, onde elementos existentes têm os comportamentos bem definidos, valores padrão da propriedade display têm seu comportamento descrito nas especificações HTML ou em uma folha de estilo padrão do navegador ou do usuário. Em linguagens onde o comportamento da propriedade display não é definido (como em XML), o valor padrão é 'inline'.

Em adição aos diferentes tipos de exibição de caixas permitidos, um outro valor, "none", permite que a exposição de um elemento seja desativada; todos os elementos filhos, também têm suas exposições desativadas. O documento é renderizado como se o elemento não existisse na árvore do documento. Este valor permite capacidades poderosas, mas deve ser usado com atenção.

• Valor inicial: inline
• Aplica-se a: todos os elementos
• Herdado: não
• Porcentagens: N/A
• Mídia: Visual
• Valor computado: como especificado, exceto para o elemento raiz, elementos flutuantes e elementos com posicionamento absoluto

Sintaxe

display: <display-value> | inherit

Valores

<display-value>

O valor de exibição pode ser qualquer um dos seguintes.

• inherit : Explicitamente configura o valor desta propriedade para o mesmo do pai.

• none : Este valor torna desativada a exibição de um elemento (ele não tem efeito na disposição); todos os elementos filhos também têm suas exibições desativadas incondicionalmente. O documento é renderizado como se o elemento não existisse na árvore do documento. Para renderizar as dimensões de um elemento caixa no esquema de formatação do documento é necessário que seu conteúdo esteja invisível, veja a propriedade 'visibility'.

• inline : Este valor faz com que o elemento gere uma ou mais caixas de elemento em linha.

• block : Este valor faz com que o elemento gere caixas de elemento em bloco.

• inline-block : Introduzido no CSS 2.1. Este valor faz com que o elemento gere uma caixa de elemento em bloco que será fluído com o conteúdo adjacente como se ele fosse uma única caixa em linha (comportando-se como um elemento substituído).
• list-item : Este valor faz com que o elemento gere uma caixa em bloco para o conteúdo e uma caixa em linha com uma lista de itens separada.

• compact : Dependendo do contexto, este valor para a propriedade display<code> cria qualquer caixa de renderização em linha ou nível de bloco. Em cada caso, diferentes propriedades CSS podem se aplicar ao elemento <code>compact. Em um contexto de nível de bloco, o elemento compact é renderizado na margem esquerda ou direita do elemento de bloco. O elemento compact participa de cálculos com espessura da linha para a linha corrente e o valor da propriedade 'vertical-align'<code> é relativo ao elemento de bloco.

• run-in : Dependendo do conteto, este valor para a propriedade <code>display cria qualquer caixa de renderização em linha ou nível de bloco. Em cada caso, diferentes propriedades CSS podem se aplicar ao elemento run-in. Propriedades para o elemento run-in são herdaddas de seus elementos pais na árvore de documentos, não de uma caixa de elementos em bloco que participa dele.

• table-header-group|table-footer-group : Estes valores fazem com que os elementos comportem-se como os valores THEAD e TFOOT correspondentes do elemento table do HTML, dos quais estes valores tiveram seu nome retirado.

• table : Este valor faz com que o elemento comporte-se como o elemento table correspondente do HTML, do qual este valor teve seu nome retirado. O valor 'inline-table' não tem um mapeamento direto no HTML.

• inline-table : Este valor faz com que o elemento comporte-se como o elemento table correspondente do HTML, do qual este valor teve seu nome retirado. O valor 'inline-table' não tem um mapeamento direto no HTML.

• table-caption : Este valor faz com que o elemento comporte-se como o elemento <code>table correspondente do HTML, do qual este valor teve seu nome retirado. O valor 'inline-table' não tem um mapeamento direto no HTML.

• table-cell : Este valor faz com que o elemento comporte-se como o elemento table correspondente do HTML, do qual este valor teve seu nome retirado. O valor 'inline-table' não tem um mapeamento direto no HTML.

• table-row|table-row-group : Estes valores fazem com que os elementos comportem-se como o elemento table correspondente do HTML, do qual este valor teve seu nome retirado. O valor 'inline-table' não tem um mapeamento direto no HTML.

• table-column|table-column-group : Estes valores fazem com que os elementos comportem-se como o elemento table correspondente do HTML, do qual estes valores tiveram seu nome retirado. O valor 'inline-table' não tem um mapeamento direto no HTML.

Exemplos

View Live Examples

Ext/Doc: p  { display: block }
In-Line:  <p STYLE="display: block">text</p>

Notas

• CSS1 Conformance: navegadores podem legalmente ignorar a propriedade 'display' e em vez disso usar os padrões do navegador para cada elemento.
• No CSS1 o valor padrão para esta proprieade era "block". No CSS2 ela foi mudada para "inline".

Elementos em "bloco" contra elementos "em linha"

• Elementos em nível de bloco cria um conteúdo de blocos verticais distinto (no contexto visual) - geralmente usando uma quebra de linha ante e depois do conteúdo. Somente este valor para a propriedade 'display é permitido para gerar um elemento posicionado. O comportamento do bloco é exibido por elementos HTML como BLOCKQUOTEs, DIVs e Cabeçalhos. Os valores da propriedade 'display' criam um tipo de bloco de elementos: 'block', 'list-item', 'table', 'compact' e 'run-in'.

• Elementos em linha não criam blocos distintos de conteúdo; o conteúdo do elemento é renderizado usando uma caixa linha (conteúdo distribuído linha por linha contendo um bloco de elementos físico ou virtual). O comportamento do em linha é exibido por elementos HTML como formatação de caractéres físicos e virtuais, imagens não flutuantes e conteúdo desmarcado. Os valores da propriedade 'display' criam um tipo de elementos em linha: 'inline', 'inline-table', 'compact' e 'run-in'.

Especificações

• CSS 1
• CSS 2.1

Compatibilidade com navegadores

Os valores table-* são suportados no Firefox. and ???

Os valores compact e run-in não são suportados no Firefox. They are supported in ???.

Os valores inline-block e inline-table são suportados a partir do Firefox 3 / Gecko 1.9. <code>inline-block</code> is also supported in ??? and <code>inline-table</code> is also supported in ???.

Veja também

• display, visibility, position, float