Display

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

/* 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;

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

<display-outside>

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.

<display-inside>

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 Experimental

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 <table>. 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 Experimental

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 <ruby> correspondentes.

<display-listitem>

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 <display-outside> e flow ou flow-root <display-inside> palavras-chave.

<display-internal>

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 <tbody> elementos HTML.

table-header-group

Esses elementos se comportam como <thead> elementos HTML.

table-footer-group

Esses elementos se comportam como <tfoot> elementos HTML.

table-row

Esses elementos se comportam como <tr> elementos HTML.

table-cell

Esses elementos se comportam como <td> elementos HTML.

table-column-group

Esses elementos se comportam como <colgroup> elementos HTML.

table-column

Esses elementos se comportam como <col> elementos HTML.

table-caption

Esses elementos se comportam como <caption> elementos HTML.

ruby-base Experimental

Esses elementos se comportam como <rb> elementos HTML.

ruby-text Experimental

Esses elementos se comportam como <rt> elementos HTML.

ruby-base-container Experimental

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

ruby-text-container Experimental

Esses elementos se comportam como <rtc> elementos HTML.

<display-box>

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.

<display-legacy>

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 <table>, 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.

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 <display-legacy> 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:

.container {
  display: inline flex;
}

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

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

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.

• Adaptando-se à nova sintaxe de exibição de dois valores

• Block and Inline Layout in Normal Flow
• Flow Layout and Overflow
• Layout de fluxo e modos de escrita
• Contextos de formatação explicados
• Em fluxo e fora de fluxo

• Conceitos básicos do flexbox
• Alinhamento de itens em um contêiner flexível
• Controle de proporções de itens flexíveis ao longo do eixo principal
• Mastering Wrapping of Flex Items
• Ordering Flex Items
• Relação do flexbox com outros métodos de layout
• Casos de uso típicos do Flexbox

• Conceitos básicos de layout de grade
• Relação com outros métodos de layout
• Posicionamento baseado em linha
• Áreas de modelo de grade
• Layout usando linhas de grade nomeadas
• Colocação automática no layout da grade
• Alinhamento da caixa no layout da grade
• Grades, valores lógicos e modos de escrita
• Layout e acessibilidade da grade CSS
• Layout de grade CSS e aprimoramento progressivo
• Realizando layouts comuns usando grades

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.

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.

• Marcação mais acessível com exibição: conteúdo | Esconda de Vries
• Exibir: o conteúdo não é uma redefinição de CSS | Adrian Roselli

Alterar o valor display de um elemento <table> 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.

• Pequena nota sobre o que as propriedades de exibição CSS fazem com a semântica da tabela — The Paciello Group
• Conteúdo oculto para melhor a11y | Vá fazer coisas
• MDN Understanding WCAG, Diretriz 1.3 explicações
• Entendendo o Critério de Sucesso 1.3.1 | W3C Understanding WCAG 2.0

display = 
  [ <display-outside> || <display-inside> ]         |
  <display-listitem>                                |
  <display-internal>                                |
  <display-box>                                     |
  <display-legacy>                                  |
  <display-outside> || [ <display-inside> | math ]  

<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   

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.

HTML

<article class="container">
  <span>Primeiro</span>
  <span>Segundo</span>
  <span>Terceiro</span>
</article>

<article class="container">
  <span>Primeiro</span>
  <span>Segundo</span>
  <span>Terceiro</span>
</article>

<div>
  <label for="display">Escolha um valor de exibição:</label>
  <select id="display">
    <option selected>block</option>
    <option>inline</option>
    <option>inline-block</option>
    <option>none</option>
    <option>flex</option>
    <option>inline-flex</option>
    <option>grid</option>
    <option>inline-grid</option>
    <option>table</option>
    <option>list-item</option>
  </select>
</div>

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

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

• Layout de bloco e inline no fluxo normal
• Introdução aos contextos de formatação
• visibility, float, position
• grid, flex