Atributo display do CSS

Definição e uso

O atributo display define o tipo de caixa que o elemento deve gerar.

Explicação

Esta propriedade é usada para definir o tipo de caixa de exibição gerada pelo elemento durante a construção do layout. Para tipos de documentos como HTML, se o display não for usado com cautela, pode ser perigoso, pois pode violar a hierarquia de exibição já definida no HTML. Para XML, já que o XML não possui essa hierarquia interna, o display é absolutamente necessário.

Notas:No CSS2 existem os valores compact e marker, mas devido à falta de suporte amplo, foram removidos do CSS2.1.

Veja também:

Tutorial CSS:Posicionamento CSS

Manual de referência HTML DOM:Atributo display

Exemplo

Faz com que o parágrafo gere um bloco inline:

p.inline
  {
  display:inline;
  }

Experimente você mesmo

Sintaxe CSS

display: value;

Valor de atributo

Valor Descrição
none Este elemento não será exibido.
block Este elemento será exibido como um elemento de bloco, com quebra de linha antes e depois do elemento.
inline Padrão. Este elemento será exibido como um elemento inline, sem quebra de linha antes e depois do elemento.
inline-block Elemento de bloco inline. (Valor adicionado no CSS2.1)
list-item Este elemento será exibido como uma lista.
run-in Este elemento será exibido como um elemento de bloco ou inline dependendo do contexto.
compact No CSS possui o valor compact, mas devido à falta de suporte amplo, foi removido do CSS2.1.
marker No CSS há um valor marker, mas devido à falta de suporte generalizado, foi removido do CSS2.1.
table Este elemento será exibido como uma tabela de bloco (semelhante a <table>), com quebras de linha antes e depois da tabela.
inline-table Este elemento será exibido como uma tabela inline (semelhante a <table>), sem quebras de linha antes e depois da tabela.
table-row-group Este elemento será exibido como um grupo de uma ou mais linhas (semelhante a <tbody>)
table-header-group Este elemento será exibido como um grupo de uma ou mais linhas (semelhante a <thead>)
table-footer-group Este elemento será exibido como um grupo de uma ou mais linhas (semelhante a <tfoot>)
table-row Este elemento será exibido como uma linha de tabela (semelhante a <tr>)
table-column-group Este elemento será exibido como um grupo de uma ou mais colunas (semelhante a <colgroup>)
table-column Este elemento será exibido como uma coluna de célula (semelhante a <col>)
table-cell Este elemento será exibido como uma célula de tabela (semelhante a <td> e <th>)
table-caption Este elemento será exibido como um título de tabela (semelhante a <caption>)
inherit Deve ser especificado que a propriedade display deve ser herdada do elemento pai.

Detalhes técnicos

Valor padrão: inline
Herança: não
Versão: CSS1
Sintaxe JavaScript: object.style.display="inline"

Exemplo TIY

Como exibir um elemento como um elemento inline
Este exemplo demonstra como exibir um elemento como um elemento inline.
Como exibir um elemento como um elemento de bloco
Este exemplo demonstra como exibir um elemento como um elemento de bloco.

Suporte do navegador

Os números na tabela indicam a primeira versão do navegador que suporta completamente essa propriedade.

Chrome IE / Edge Firefox Safari Opera
4.0 8.0 3.0 3.1 7.0

Notas:Se foi especificado !DOCTYPE, o Internet Explorer 8 (e versões mais recentes) suporta os valores de atributo "inline-table", "run-in", "table", "table-caption", "table-cell", "table-column", "table-column-group", "table-row", "table-row-group" e "inherit".