Display

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

A propriedade display CSS define se um elemento é tratado como um bloco ou elemento inline e o layout usado para seus filhos, como layout de fluxo, grid ou flex.

Formalmente, a propriedade display define os tipos de exibição internos e externos de um elemento. O tipo externo define a participação de um elemento no layout de fluxo; o tipo interno define o layout dos filhos. Alguns valores de display são totalmente definidos em suas próprias especificações individuais; por exemplo, o detalhe do que acontece quando display: flex é declarado é definido na especificação CSS Flexible Box Model.

Sintaxe

A propriedade CSS display é especificada usando valores de palavra-chave.

css
/* valores pré-compostos */
display: block;
display: inline;
display: inline-block;
display: flex;
display: inline-flex;
display: grid;
display: inline-grid;
display: flow-root;

/* geração de caixas */
display: none;
display: contents;

/* sintaxe de dois valores */
display: block flow;
display: inline flow;
display: inline flow-root;
display: block flex;
display: inline flex;
display: block grid;
display: inline grid;
display: block flow-root;

/* outros valores */
display: table;
display: table-row; /* todos os elementos da tabela têm um valor de exibição CSS equivalente */
display: list-item;

/* Valores globais */
display: inherit;
display: initial;
display: revert;
display: revert-layer;
display: unset;

Valores agrupados

Os valores de palavra-chave podem ser agrupados em seis categorias de valor.

Fora

essas palavras-chave especificam o tipo de exibição externa do elemento, que é essencialmente sua função no layout de fluxo:

block

O elemento gera uma caixa de elemento de bloco, gerando quebras de linha antes e depois do elemento quando no fluxo normal.

inline

O elemento gera uma ou mais caixas de elemento em linha que não geram quebras de linha antes ou depois de si mesmas. No fluxo normal, o próximo elemento estará na mesma linha se houver espaço.

Nota: Navegadores que suportam a sintaxe de dois valores, ao localizar apenas o valor externo, como quando display: block ou display: inline é especificado, definirão o valor interno como flow. Isso resultará no comportamento esperado; por exemplo, se você especificar um elemento para ser bloco, você esperaria que os filhos desse elemento participassem do bloco e do layout de fluxo normal embutido.

Lado de dentro

Estas palavras-chave especificam o tipo de exibição interna do elemento, que define o tipo de contexto de formatação em que seu conteúdo é apresentado (supondo que seja um elemento não substituído):

flow

O elemento apresenta seu conteúdo usando o layout de fluxo (layout de bloco e linha).

Se seu tipo de exibição externa for inline ou run-in, e estiver participando de um bloco ou contexto de formatação inline, ele gerará uma caixa inline. Caso contrário, gera uma caixa de contêiner de bloco.

Dependendo do valor de outras propriedades (como position, float ou overflow) e se ele próprio está participando em um contexto de formatação em bloco ou em linha, ele estabelece um novo contexto de formatação de bloco (BFC) para seu conteúdo ou integra seu conteúdo em seu contexto de formatação pai.

flow-root

O elemento gera uma caixa de elemento de bloco que estabelece um novo contexto de formatação de bloco, definindo onde está a raiz de formatação.

table

Esses elementos se comportam como elementos HTML

. Ele define uma caixa de nível de bloco.

flex

O elemento se comporta como um elemento de bloco e apresenta seu conteúdo de acordo com o modelo flexbox.

grid

O elemento se comporta como um elemento de bloco e apresenta seu conteúdo de acordo com o modelo de grade.

ruby

O elemento se comporta como um elemento inline e apresenta seu conteúdo de acordo com o modelo de formatação ruby. Ele se comporta como os elementos HTML correspondentes.

Nota: Navegadores que suportam a sintaxe de dois valores, ao encontrar apenas o valor interno, como quando display: flex ou display: grid é especificado, definirão seu valor externo como block. Isso resultará no comportamento esperado; por exemplo, se você especificar um elemento como display: grid, você esperaria que a caixa criada no contêiner da grade fosse uma caixa de nível de bloco.

Item de lista

O elemento gera uma caixa de bloco para o conteúdo e uma caixa inline de item de lista separada.

Um único valor de list-item fará com que o elemento se comporte como um item de lista. Isso pode ser usado junto com list-style-type e list-style-position.

list-item também pode ser combinado com qualquer palavra-chave e flow ou flow-root palavras-chave.

Nota: Em navegadores que suportam a sintaxe de dois valores, se nenhum valor interno for especificado, o padrão será flow. Se nenhum valor externo for especificado, a caixa principal terá um tipo de exibição externa de bloco.

Interno

Alguns modelos de layout como table e ruby possuem uma estrutura interna complexa, com vários papéis diferentes que seus filhos e descendentes podem preencher. Esta seção define os valores de exibição "internos", que só têm significado dentro desse modo de layout específico.

table-row-group

Esses elementos se comportam como

elementos HTML.

table-header-group

Esses elementos se comportam como

elementos HTML.

Esses elementos se comportam como

elementos HTML.

table-row

Esses elementos se comportam como

elementos HTML.

table-cell

Esses elementos se comportam como

elementos HTML.

table-column

Esses elementos se comportam como

elementos HTML.

table-caption

Esses elementos se comportam como

elementos HTML.

table-column-group

Esses elementos se comportam como

elementos HTML.

ruby-base

Esses elementos se comportam como elementos HTML.

ruby-text

Esses elementos se comportam como elementos HTML.

ruby-base-container

Esses elementos são gerados como caixas anônimas.

ruby-text-container

Esses elementos se comportam como elementos HTML.

Caixa

Esses valores definem se um elemento gera caixas de exibição.

contents

Esses elementos não produzem uma caixa específica por si mesmos. Eles são substituídos por sua pseudocaixa e suas caixas filhas. Observe que a especificação CSS Display Level 3 define como o valor contents deve afetar os "elementos incomuns" — elementos que não são renderizados puramente por conceitos de caixa CSS, como elementos substituídos. Consulte Apêndice B: Efeitos da exibição: conteúdo sobre elementos incomuns para obter mais detalhes.

Devido a um bug nos navegadores, isso removerá o elemento da árvore de acessibilidade - os leitores de tela não verão o que está dentro. Consulte a seção Preocupações de acessibilidade abaixo para obter mais detalhes.

none

Desativa a exibição de um elemento para que não tenha efeito no layout (o documento é renderizado como se o elemento não existisse). Todos os elementos descendentes também têm sua exibição desligada. Para que um elemento ocupe o espaço que normalmente ocuparia, mas sem realmente renderizar nada, use a propriedade visibility.

Pré-composto

CSS 2 usava uma palavra-chave única, sintaxe pré-composta para a propriedade display, exigindo palavras-chave separadas para variantes de nível de bloco e nível inline do mesmo modo de layout.

inline-block

O elemento gera uma caixa de elemento de bloco que fluirá com o conteúdo ao redor como se fosse uma única caixa em linha (comportando-se como um elemento substituído faria).

É equivalente a inline flow-root.

inline-table

O valor inline-table não possui um mapeamento direto em HTML. Ele se comporta como um elemento HTML

, mas como uma caixa embutida, em vez de uma caixa em nível de bloco. Dentro da caixa da tabela há um contexto de nível de bloco.

É equivalente a tabela inline.

inline-flex

O elemento se comporta como um elemento inline e apresenta seu conteúdo de acordo com o modelo flexbox.

É equivalente a inline flex.

inline-grid

O elemento se comporta como um elemento inline e apresenta seu conteúdo de acordo com o modelo de grade.

É equivalente a inline grid.

Qual sintaxe você deve usar agora?

A especificação de Nível 3 detalha dois valores para a propriedade display — habilitando explicitamente a especificação do tipo de exibição externa e interna — mas isso ainda não é bem suportado pelos navegadores.

Os métodos pré-compostos permitem os mesmos resultados com valores de palavra-chave única e devem ser favorecidos pelos desenvolvedores até que os dois valores de palavra-chave sejam melhor suportados. Por exemplo, usando dois valores, você pode especificar um contêiner flexível em linha da seguinte forma:

css
.container {
  display: inline flex;
}

Atualmente, isso pode ser especificado usando um único valor.

css
.container {
  display: inline-flex;
}

Para obter mais informações sobre essas alterações na especificação, consulte o artigo Adapting to the new two-value sintax of display.

Global

css
/* Valores globais */
display: inherit;
display: initial;
display: unset;

Descrição

As páginas individuais para os diferentes tipos de valor que o display pode ter definido apresentam vários exemplos desses valores em ação — consulte a seção Sintaxe. Além disso, consulte o material a seguir, que abrange os vários valores de exibição em profundidade.

Layout de fluxo CSS (exibir: bloquear, exibir: embutido)

display: flex

display: grid

Preocupações de acessibilidade

display: none

Usar um valor display de none em um elemento irá removê-lo da árvore de acessibilidade. Isso fará com que o elemento e todos os seus descendentes não sejam mais anunciados pela tecnologia de leitura de tela.

Se você deseja ocultar visualmente o elemento, uma alternativa mais acessível é usar uma combinação de propriedades para remover visualmente da tela, mas mantenha-o analisável por tecnologia assistiva, como leitores de tela.

display: contents

As implementações atuais na maioria dos navegadores removerão da árvore de acessibilidade qualquer elemento com um valor display de contents (mas os descendentes permanecerão). Isso fará com que o próprio elemento não seja mais anunciado pela tecnologia de leitura de tela. Este é um comportamento incorreto de acordo com a especificação CSS.

Tabelas

Alterar o valor display de um elemento

para block, grid ou flex alterará sua representação na árvore de acessibilidade. Isso fará com que a mesa não seja mais anunciada corretamente pela tecnologia de leitura de tela.

Definição formal

Initial valueinline
Aplica-se aall elements
Inheritednão
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 behavior except when animating to or from none is visible for the entire duration

Sintaxe formal

display = 
  [  ||  ]         |
                                  |
                                  |
                                       |
                                    |
   || [  | math ]  

 = 
  block   |
  inline  |
  run-in  

 = 
  flow       |
  flow-root  |
  table      |
  flex       |
  grid       |
  ruby       

 = 
  ?     &&
  [ flow | flow-root ]?  &&
  list-item              

 = 
  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  

 = 
  contents  |
  none      

 = 
  inline-block  |
  inline-table  |
  inline-flex   |
  inline-grid

Exemplos

exibir comparação de valores

Neste exemplo, temos dois elementos de contêiner em nível de bloco, cada um com três filhos embutidos. Abaixo disso, temos um menu de seleção que permite aplicar diferentes valores display aos contêineres, permitindo comparar e contrastar como os diferentes valores afetam o layout do elemento e de seus filhos.

Incluímos padding e background-color nos contêineres e seus filhos, para que seja mais fácil ver o efeito que os valores de exibição estão tendo.

Nota: não incluímos nenhuma sintaxe moderna de dois valores, pois o suporte a ela ainda é bastante limitado.

HTML

html

  Primeiro
  Segundo
  Terceiro





  Primeiro
  Segundo
  Terceiro

CSS

css
html {
  font-family: helvetica, arial, sans-serif;
  letter-spacing: 1px;
  padding-top: 10px;
}

article {
  background-color: red;
}

article span {
  background-color: black;
  color: white;
  margin: 1px;
}

article,
span {
  padding: 10px;
  border-radius: 7px;
}

article,
div {
  margin: 20px;
}

JavaScript

js
const articles = document.querySelectorAll(".container");
const select = document.querySelector("select");

function updateDisplay() {
  articles.forEach((article) => {
    article.style.display = select.value;
  });
}

select.addEventListener("change", updateDisplay);

updateDisplay();

Resultado

Nota: você pode encontrar mais exemplos nas páginas para cada tipo de dados de exibição separado, linkado acima.

Especificações

Specification
CSS Display Module Level 3
# the-display-properties
Scalable Vector Graphics (SVG) 2
# VisibilityControl

Compatibilidade do navegador

Veja também