:: A propriedade CSS display ::

Autor: ppk
URL do original: http://www.quirksmode.org/css/display.html
Título original: The display declaration
Traduzido com autorização do autor

A propriedade display permite que você defina a maneira como determinado elemento HTML deve ser renderizado.

Ver também Especificações do W3C.

Conteúdos desta tabela: [block] [inline] [none] [inline-block] [list-item] [run-in] [compact] [table]

Valor Explorer 5/6 Windows Explorer 7 beta 2 Explorer 5.2 Mac Firefox 1.5 Safari 1.3.2 Opera 9 iCab 3.0
Sim Sim Sim Sim Sim Sim Sim
 
Sim Sim Sim Sim Sim Sim Sim
 
Sim Sim Sim Sim Sim Sim Sim
 
Incompleto 6.0 Incom pleto Sim Não Sim Sim Sim
Internet Explorer 6+ aceita estes valores somente em elementos naturalmente com display: inline.
6.0 Sim Buggy Sim Sim Sim Sim
Internet Explorer para Mac renderiza como list-style-type: decimal no lugar de colocar uma marca (bullet) no item da lista. Além disso, renderiza a numeração incorretamente.
Não Não Buggy Não Incom pleto Sim Não
O navegador Safari falhou em um destes dois testes.
Não Não Não Não Buggy Sim Buggy
 
Não Não Buggy Sim Strict Sim Parcial
O navegador Safari precisa de elementos com display: table edisplay: table-row para mostrar as células corretamente. Os demais navegadores dispensam aquelas declarações.
Valor Explorer 5/6 Windows Explorer 7 beta 2 Explorer 5.2 Mac Firefox 1.5 Safari 1.3.2 Opera 9 iCab 3.0

display: block

A declaração display: block faz com que o elemento HTML seja renderizado como bloco, tal como os parágrafos e os cabeçalhos o são. Um bloco contém um espaço em branco tanto em cima como embaixo e não permite outros elementos HTML ao lado, exceto quando tiver sido declarado ao contrário (por exemplo, declarar a propriedade float para o elemento próximo ao bloco).

Exemplo:
priomeiro {display: block}
segundo {display: block}
terceiro {display: block}

display: inline

A propriedade display: inline faz com que o elemento HTML seja renderizado inline, dentro do bloco na mesma linha. Quando o elemento encontra-se entre dois blocos ele forma o chamado 'bloco anônimo' e é renderizado com a menor largura possível.

Exemplo:
display: block
display: inline
display: block
display: block
display: block
display: inline

display: none

A declaração display: none faz com que o elemento HTML não seja renderizado (assim sendo você não o verá no exemplo a seguir, é o segundo bloco. Ver código fonte).

Exemplo:
primeiro bloco - display: block
terceiro bloco - display: block

display: inline-block

Nos Explorer 6 e 7 o valor inline-block funciona somente para os elementos HTML que por sejam display: inline.

No navegador Mozilla você pode usar -moz-inline-box, mas cuidado que este valor não é o mesmo que inline-block, e poderá não funcionar como esperado em determinadas situações.

Um bloco inline é colocado inline (ou seja, na mesma linha do conteúdo adjacente), mas comporta-se como se fosse um bloco.

Exemplo:
display: block
Vamos adicionar conteúdo para ver como o bloco se comporta.
display: inline-block; width: 13em
Vamos adicionar conteúdo para ver como o bloco se comporta.
Vamos adicionar conteúdo para ver como o bloco se comporta. Vamos adicionar conteúdo para ver como o bloco se comporta. span (and not div) with display: inline-block; width: 13em
Vamos adicionar conteúdo para ver como o bloco se comporta.
Vamos adicionar conteúdo para ver como o bloco se comporta.

No exemplo acima os blocos deveriam se comportar como mostrado na figura abaixo (Ópera):

Exemplo de display: inline-block

Na prática usamos o valor inline-block quando queremos definir um valor para a propriedade width. Sob certas circunstâncias, alguns navegadores ignoram a propriedade width para elementos inline, então definindo display: inline-block para tais elementos você forçará o navegador a reconhecer o valor definido para a propriedade width.

display: list-item

Não é suportada pelo Internet Explorer 5 Windows.

A propriedade display: list-item faz com que o elemento HTML seja renderizado como um item de lista, isto significa que aparecerá um marcador (bullet) na frente de cada item (tal como acontece com o elemento UL), exceto para o Internet Explorer 5 para Mac que renderiza um número no lugar de um marcador (tal como acontece com o elemento OL). A numeração neste caso apresenta um bug: todos os itens de lista porventura existentes na página contam e em consequência a numeração inicia-se a partir daquela contagem.

Live example:
display: block
display: list-item
display: list-item

display: run-in

Suportada pelo Ópera 5+ e com restrições pelo Internet Explorer 5 para Mac.

Suportada de forma incorreta pelo Safari 1.3.2: no segundo exemplo o box inline deve permanecer abaixo do box run-in.

Definição de display: run-in segundo o W3C:
"Se um box nível de bloco (que não seja flutuado ou absolutamente posicionado) segue-se a um box run-in este torna-se o primeiro box inline do box nível de bloco.
Caso contrário, o box run-in é um box nível de bloco."

Pergunta: Para que você precisa disto?

De qualquer maneira, o navegador Ópera é o único que realmente suporta esta propriedade. Ela remove o padding-top e padding-bottom do box run-in embora isto não esteja previsto pelo W3C.
Internet Explorer 5 para Mac indenta o box run-in. Eu não tenho a mínima idéia porque ele faz isto.

Exemplo:
display: block
display: run-in
display: block
display: run-in
display: inline

No exemplo acima os blocos deveriam se comportar como mostrado na figura abaixo (Ópera):

Exemplo de display: run-in

display: compact

Suportada pelo Ópera. Bug no Safari e iCab.

Definição de display: compact segundo o W3C:
"Se um box nível de bloco (que não seja flutuado ou absolutamente posicionado) segue-se a um box compact este será formatado como um one-line inline box. [...com suas peculiaridades de margens...]
Caso contrário, o box compact é um box nível de bloco."

O box compacto será posicionado à esquerda do bloco que lhe segue sempre que houver espaço suficiente para isto. No segundo exemplo da figura a seguir, para o terceiro bloco foi definida uma margen esquerda com tamanho suficiente para deixar espaço para o box compacto. Para o primeiro exemplo na mesma figura, não foi definida uma margem e em consequência não há espaço para o bloco compacto e assim ele foi renderizado como um bloco.

Exemplo:
display: block
display: compact
display: block
display: compact
display: block; margin-left: 12em

No exemplo acima os blocos deveriam se comportar como mostrado na figura abaixo (Ópera):

Exemplo de display: compact

display: table

Não é suportada pelo Internet Explorer.

O navegador Safari precisa de elementos com declaração display: table e display: table-row para mostrar as células corretamente.

O navegador iCab não mostra o texto 'display: table-row'.

A declaração display: table faz com que o elemento HTML seja renderizado como tabela. Elementos aninhados devem ser renderizados como table-row e table-cell, tal como nossas velhas conhecidas TR's e TD's. Existe também a declaração display: table-column que não tem qualquer influência na renderização servindo apenas como uma informação tal como o elemento COL. Eu não tenho certeza de como exatamente esta declaração funciona.

Exemplo:
Neste exemplo as DIV's foram convenientemente aninhadas e declaradas com display: table,
display: table-row e display: table-cell.
display: table
display: table-row
display: table-cell e mais conteúdo
display: table-cell
display: table-row
display: table-cell
display: table-cell
Para a DIV mais externa deste exemplo foi declarado display: block e não table.
display: block
display: table-row
display: table-cell e mais conteúdo
display: table-cell
display: table-row
display: table-cell
display: table-cell
Neste exemplo não existe DIVs com display: table-row
display: table
display: table-cell e mais conteúdo
display: table-cell

No exemplo acima os blocos deveriam se comportar como mostrado na figura abaixo (Firefox 2.0):

Exemplo de  display table no Mozilla

O navegador Safari precisa das declarações display: table e display: table-row:

Exemplo de  display table no Safari

Playground

O autor no artigo original criou o que ele chamou de playground que é uma seção interativa deste tutorial baseada em javascript na qual você poderá fazer testes com a propriedade display e seus valores aqui mostrados.

Eu não transcrevi a seção interativa, mas se você quiser fazer seus testes,
visite o Playground no artigo original.

Meu nome é Maurício Samy Silva e eu sou conhecido na Web como Maujor.

Mantenho o Site do Maujor hospedado em: maujor.com e meu e-mail de contato é maujorcss[ARROBA]maujor [PT]com.

Minha residência é em:

Copacabana - Rio de Janeiro,, RJ - - Brasil

Traduzido em: 2007-02-22