display

Resumo

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 syntax: [ <display-outside> || <display-inside> ] | <display-listitem> | <display-internal> | <display-box> | <display-legacy>
where 
<display-outside> = block | inline | run-in
<display-inside> = flow | flow-root | table | flex | grid | subgrid | ruby
<display-listitem> = list-item && <display-outside>? && [ flow | flow-root ]?
<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-list-item | 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

Valores

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 dimenções de caixa do elemente, tendo ainda seu conteúdo "invisivel", veja a propriedade visibility.
	inline	The element generates one or more inline element boxes.
	block	The element generates a block element box.
	list-item	The element generates a block box for the content and a separate list-item inline box.
Extended values (CSS 2.1)	inline-block	The element generates a block element box that will be flowed with surrounding content as if it were a single inline box (behaving much like a replaced element would)
Table model values (CSS 2.1)	inline-table	The inline-table value does not have a direct mapping in HTML. It behaves like a <table> HTML element, but as an inline box, rather than a block-level box. Inside the table box is a block-level context.
	table	Behaves like the <table> HTML element. It defines a block-level box.
	table-caption	Behaves like the <caption> HTML element.
	table-cell	Behaves like the <td> HTML element
	table-column	These elements behave like the corresponding <col> HTML elements.
	table-column-group	These elements behave like the corresponding <colgroup> HTML elements.
	table-footer-group	These elements behave like the corresponding <tfoot> HTML elements
	table-header-group	These elements behave like the corresponding <thead> HTML elements
	table-row	Behaves like the <tr> HTML element
	table-row-group	These elements behave like the corresponding <tbody> HTML elements
Flexbox model values (CSS3)	flex	The element behaves like a block element and lays out its content according to the flexbox model.
	inline-flex	The element behaves like an inline element and lays out its content according to the flexbox model.
Grid box model values (CSS3)	grid	The element behaves like a block element and lay out its content according to the grid model. As this is experimental, most browsers don't support it. Especially pay attention that -moz-grid is not the prefixed version of this, but a XUL layout model that must not be used on a Web site.
	inline-grid	The element behaves like an inline element and lay out its content according to the grid model.
Experimental values	run-in	If the run-in box contains a block box, same as block. If a block box follows the run-in box, the run-in box becomes the first inline box of the block box. If a inline box follows, the run-in box becomes a block box.

Examples

View Live Examples

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

Especificações

Browser's compatíveis 

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

[1] To activate flexbox support, for Firefox 18 and 19, the user has to change the about:config preference "layout.css.flexbox.enabled" to true. Multi-line flexbox are supported since Firefox 28.

Veja mais

• visibility, float, position