Propriedade CSS display

A propriedade display é uma das mais importantes propriedades CSS para controlar o layout. Ela define o tipo de caixa de renderização que um elemento HTML gera — se ele ocupa sua própria linha, flui de forma inline com o texto, torna-se um contêiner flex ou grid, ou desaparece completamente.

Este capítulo aborda o que cada valor de display faz, a diferença entre o display externo (como a caixa se comporta em relação aos seus irmãos) e o display interno (como seus filhos são organizados), as pegadinhas mais comuns e exemplos executáveis para cada valor principal.

Por que a propriedade display é importante

Todo elemento começa com um valor padrão de display fornecido pela folha de estilo do agente de usuário do navegador — <div> e <p> têm como padrão block, <span> e <a> têm como padrão inline, <li> tem como padrão list-item, e assim por diante. Com display você pode substituir esse padrão. Por exemplo, um elemento em nível de bloco pode ser tornado inline definindo display: inline, e uma lista de links pode ser transformada em uma barra de navegação horizontal.

Duas observações adicionais sobre os padrões:

• Em HTML, o display inicial de um elemento vem da especificação HTML ou do estilo do navegador/usuário — não do padrão da palavra-chave display: inline que você vê na especificação CSS.
• Em XML (que não tem estilo embutido), todos os elementos realmente têm como padrão inline.

CSS antigo vs. moderno: em especificações mais antigas, width e height não tinham efeito em elementos inline. A observação ainda aparece em muitos tutoriais, mas na prática os navegadores ignoram width/height em uma caixa inline simples. Para dimensionar um elemento e mantê-lo na linha, use inline-block.

Tipos de caixa no CSS

Existem vários formatos principais de caixa no CSS:

• Inline — Caixas em nível inline fluem dentro de uma linha de texto e não forçam uma quebra de linha. <span>, <em> e <img> são inline por padrão. Uma caixa inline aceita padding e margens, mas o padding/margens verticais não afastam as linhas vizinhas, e width/height são ignorados. Para dimensionar a caixa mantendo-a na linha, use inline-block. (Veja elementos block vs. inline.)
• Inline-block — Comporta-se como uma caixa inline (fica na linha ao lado do texto e outros conteúdos inline), mas respeita width, height e margens/padding verticais. É o valor indicado quando você quer dimensionamento de caixa sem quebrar para uma nova linha.
• Block — Caixas em nível de bloco iniciam em uma nova linha e, por padrão, se estendem para preencher a largura disponível do seu contêiner. Podem conter outras caixas em nível de bloco. <p>, <ul>, <h1>-<h6>, <div>, <section> e <ol> são em nível de bloco por padrão.
• Flex — display: flex gera um contêiner flex em nível de bloco e organiza seus filhos diretos ao longo de um único eixo. Veja O Guia Definitivo do Flexbox.
• Grid — display: grid gera um contêiner grid em nível de bloco e organiza seus filhos em duas dimensões (linhas e colunas). Veja a propriedade grid.
• Valores de tabela — Valores como table, table-row e table-cell fazem elementos que não são tabelas se comportar como os elementos HTML de tabela correspondentes. inline-table se comporta como um <table> mas como uma caixa inline; dentro da caixa de tabela é estabelecido um contexto em nível de bloco.

Display externo vs. interno: o CSS moderno descreve display como duas partes. O valor externo (block ou inline) controla como a caixa participa do layout de seu pai; o valor interno (flow, flex, grid, table) controla como a caixa organiza seus próprios filhos. É por isso que flex torna um elemento uma caixa em nível de bloco e um contêiner flex ao mesmo tempo.

Sintaxe

Sintaxe da Propriedade CSS display

display: inline | block | contents | flex | grid | inline-block | inline-flex | inline-grid | inline-table | list-item | run-in | table | table-caption | table-column-group | table-header-group | table-footer-group | table-row-group | table-cell | table-column | table-row | none | initial | inherit;

Exemplo da propriedade display:

Exemplo da Propriedade CSS display com o valor inline

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .display li {
        display: inline;
        margin-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with its initial value:</p>
    <ul>
      <li>List item</li>
      <li>List item</li>
    </ul>
    <p>Here the list item is used with the display property. The "inline" value is used:</p>
    <ul class="display">
      <li>List item 1</li>
      <li>List item 2</li>
    </ul>
  </body>
</html>

Resultado

Quando display: inline é aplicado aos itens de lista, eles não começam mais cada um em uma nova linha — em vez disso, ficam lado a lado, separados apenas pelo margin-right definido.

Exemplo da propriedade display com os valores "inline" e "block":

Exemplo da Propriedade CSS display com os valores inline e block

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .inline {
        border: 1px solid #1c87c9;
        display: inline;
      }
      .block {
        border: 1px solid #1c87c9;
        display: block;
        height: 30px;
        width: 300px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the list item is with "initial" value. We see that the "inline" value does not accept height and width:</p>
    <span>This is some text.</span>
    <span class="inline">This is another text.</span>
    <hr />
    <p>Here the list item is used with the "block" value of the display property:</p>
    <span class="block">This is some text.</span>
    <span class="block">This is another text.</span>
  </body>
</html>

O primeiro par de <span>s permanece em uma linha porque inline ignora width e height. Os spans .block, por outro lado, ocupam uma linha completa cada um e respeitam a largura de 300px e a altura de 30px.

Exemplo da propriedade display com o valor "block":

Exemplo da Propriedade CSS display com o valor block

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .block {
        display: block;
        border: 1px solid #666;
        background-color: #eee;
        padding: 10px;
        width: 200px;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #8ebf42;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="block">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Exemplo da propriedade display com o valor "contents":

Exemplo da Propriedade CSS display com o valor contents

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .contents {
        display: contents;
      }
      .hello {
        border: 1px solid #1c87c9;
        background-color: #ccc;
        padding: 10px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <div class="contents">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      <div class="hello">HELLO!</div>
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </div>
  </body>
</html>

Com display: contents, o invólucro .contents não gera nenhuma caixa própria — sua borda e plano de fundo seriam ignorados, e seus filhos (o texto e a caixa .hello) se comportam como se fossem filhos diretos de <body>.

Exemplo da propriedade display com o valor "flex":

Exemplo da Propriedade CSS display com o valor flex

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #flex {
        width: 300px;
        height: 100px;
        border: 1px solid #c3c3c3;
        display: flex;
        justify-content: center;
      }
      div {
        width: 70px;
        height: 70px;
      }
    </style>
  </head>
  <body>
    <h2>Display property example</h2>
    <p>Here the "display: flex;" is used:</p>
    <div id="flex">
      <div style="background-color: #1c87c9;">1</div>
      <div style="background-color: #666;">2</div>
      <div style="background-color: #8ebf42;">3</div>
    </div>
  </body>
</html>

Valores

display: none vs. visibility: hidden

Um ponto frequente de confusão: display: none remove o elemento do fluxo do documento completamente — ele não ocupa espaço, como se tivesse sido excluído. visibility: hidden oculta o elemento mas mantém sua caixa, portanto ainda reserva o espaço que teria ocupado. Use display: none para recolher o layout, e visibility: hidden para ocultar preservando o espaço no layout.

Propriedades relacionadas

• O Guia Definitivo do Flexbox — tudo que display: flex habilita.
• grid — construindo layouts bidimensionais com display: grid.
• visibility — ocultar elementos sem removê-los do fluxo.
• position e float — outras formas de controlar o posicionamento das caixas.
• Elementos block e inline — os padrões HTML que display substitui.

Prática