Título da página

Introdução

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

Ver também Especificações do W3C.

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).

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.

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).

display: inline-block

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

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

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

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.

display: 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.

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

display: compact

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.

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

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.

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

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

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.

Compartilhe essa matéria com seus amigos