MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

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.

Initial valueinline
Aplica-se aall elements
Inheritednão
Midiaall
Computed valueas the specified value, except for positioned and floating elements and the root element. In both cases the computed value may be a keyword other than the one specified.
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

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

Specification Status Comment
CSS Basic Box Model
The definition of 'display' in that specification.
Rascunho atual Added the run-in value.
CSS Grid Layout
The definition of 'display' in that specification.
Candidata a Recomendação Added the grid box model values.
CSS Flexible Box Layout Module
The definition of 'display' in that specification.
Candidata a Recomendação Added the flexible box model values.
CSS Level 2 (Revision 1)
The definition of 'display' in that specification.
Recomendação Added the table model values and inline-block.
CSS Level 1
The definition of 'display' in that specification.
Recomendação Basic values: none, block, inline, and list-item.

Browser's compatíveis 

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
none, inline and block 1.0 1.0 (1.0) 4.0 7.0 1.0 (85)
inline-block 1.0 3.0 (1.9) 5.5 (-7.0)
natural inline elements only
7.0 1.0 (85)
list-item 1.0 1.0 (1.0) 6.0 7.0 1.0 (85)
run-in 1.0
Not before inline-elements
Não suportado 8.0 7.0 1.0 (85)
Not before inline-elements

4.0

Removed in 32

5.0 (532.5)
inline-table 1.0 3.0 (1.9) 8.0 7.0 1.0 (85)
table, table-cell, table-column, table-colgroup, table-header-group, table-row-group, table-footer-group, table-row, and table-caption 1.0 1.0 (1.0) 8.0 7.0 1.0 (85)
flex 21.0-webkit 18.0 (18.0)(behind a pref) [1] Não suportado 12.50 Não suportado
inline-flex 21.0-webkit 18.0 (18.0)(behind a pref) [1] Não suportado 12.50 Não suportado
grid ? Não suportado 10.0-ms ? ?
inline-grid ? Não suportado 10.0-ms ? ?
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

[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

Etiquetas do documento e colaboradores

 Colaboradores desta página: gabrielsixel, jorgeclesio, Sebastianz, KikenCris, teoli, fnsc.luis
 Última atualização por: gabrielsixel,