display

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.

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

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 elemento
	table-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 elementos
	table-header-group	Esses elementos se comportam como o correspondente<thead> (en-US) HTML elementos
	table-row	Comporta-se como o <tr> (en-US) HTML elemento
	table-row-group	Esses elementos se comportam como o correspondente <tbody> (en-US) HTML elementos
Valores 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.

Ver exemplos ao vivo

p.secret  { display: none }
<p style="display:none"> invisible text </p>

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

• visibility, float, position