Docs executáveis de CSS: Display CSS

Q: Qual a diferença entre block, inline e inline-block?

Um elemento block começa em uma nova linha e ocupa a largura disponível. Um elemento inline corre dentro do texto e ignora width, height e margens verticais. inline-block corre dentro do texto como o inline, mas aceita largura, altura, padding e margens como um bloco.

Q: Qual a diferença entre display: none e visibility: hidden?

display: none remove o elemento e o espaço dele. visibility: hidden o deixa invisível, mas mantém o espaço no layout, então nada se move.

Q: Uma div é block ou inline por padrão?

Block. div, p, títulos, ul, section e form são block por padrão; span, a, strong, em, img, input e button são inline ou inline-block.

O que o display faz

Todo elemento tem um valor de display que decide como ele é disposto na página. Os três que você encontra primeiro são block, inline e inline-block. Aqui estão três caixas idênticas, com o mesmo width, height, padding e margin; só o display muda:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>block, inline, inline-block</title>
  <style>
    body { font-family: system-ui, sans-serif; line-height: 1.6; }
    .demo { border: 1px dashed #9ca3af; padding: 8px; margin-bottom: 12px; }
    .box {
      width: 120px; height: 40px;
      padding: 6px; margin: 10px;
      background: #bfdbfe; border: 2px solid #2563eb;
    }
    .block { display: block; }
    .inline { display: inline; }
    .inline-block { display: inline-block; }
  </style>
</head>
<body>
  <div class="demo">Text before <span class="box block" id="b">block</span> text after.</div>
  <div class="demo">Text before <span class="box inline" id="i">inline</span> text after.</div>
  <div class="demo">Text before <span class="box inline-block" id="ib">inline-block</span> text after.</div>
</body>
</html>

	`block`	`inline`	`inline-block`
Começa em uma nova linha	Sim	Não	Não
Largura padrão	Ocupa o contêiner	Se ajusta ao conteúdo	Se ajusta ao conteúdo
`width` e `height`	Valem	Ignorados	Valem
Margin vertical	Vale	Ignorada	Vale
Padding vertical	Empurra o conteúdo	Pintado, mas não afasta as linhas	Empurra o conteúdo
Elementos típicos	`div`, `p`, `h1`, `ul`, `section`	`span`, `a`, `strong`, `em`	`button`, `input`, `img` (elementos substituídos se comportam assim)

Na prévia, a caixa block fica sozinha na linha, com 120px de largura. A inline ignora largura e altura e envolve só a palavra dela, e o padding e a borda verticais saem acima e abaixo da linha sem deixá-la mais alta. A caixa inline-block fica na linha do texto, mas mantém o tamanho completo.

display: block

Um elemento block ocupa toda a largura disponível e empurra o que vem depois para uma nova linha. Transformar um link em block é o jeito de deixar uma linha inteira clicável:

.menu a {
  display: block;       /* the full row is the link */
  padding: 10px 16px;
}

A largura de um block pode ser definida, e margin: 0 auto o centraliza assim que ele tem uma, como mostra a página de como centralizar uma div.

display: inline-block

inline-block é o meio-termo: ele corre na linha como uma palavra, mas você pode dar tamanho a ele. É útil para badges, botões e ícones dentro do texto:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>inline-block badges</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .badge {
      display: inline-block;
      min-width: 24px;
      padding: 2px 8px;
      margin-inline-start: 4px;
      border-radius: 999px;
      background: #dc2626; color: white;
      font-size: 12px; font-weight: 700; text-align: center;
    }
  </style>
</head>
<body>
  <p>Inbox <span class="badge">3</span></p>
  <p>Notifications <span class="badge">12</span></p>
</body>
</html>

Várias caixas inline-block em sequência ganham um pequeno espaço entre elas por causa do espaço em branco do HTML. Para fileiras de caixas, display: flex no pai é a ferramenta melhor.

display: none vs visibility: hidden

Os dois deixam um elemento invisível. A diferença é se ele mantém o espaço:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>none vs hidden</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 8px; margin-bottom: 12px; }
    .row div { width: 70px; padding: 12px 0; text-align: center; background: #bbf7d0; border: 2px solid #16a34a; }
    .none { display: none; }
    .hidden { visibility: hidden; }
  </style>
</head>
<body>
  <div class="row"><div>1</div><div>2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="none">2</div><div>3</div></div>
  <div class="row"><div>1</div><div class="hidden">2</div><div>3</div></div>
  <button type="button" id="toggle">Toggle box 2 in the first row</button>
  <script>
    document.getElementById('toggle').addEventListener('click', () => {
      document.querySelector('.row div:nth-child(2)').classList.toggle('none');
    });
  </script>
</body>
</html>

	`display: none`	`visibility: hidden`	`opacity: 0`
Ocupa espaço	Não	Sim	Sim
Pode ser clicado	Não	Não	Sim
Lido por leitores de tela	Não	Não	Sim
Pode ser animado suavemente	Não	Não	Sim

O atributo HTML hidden faz o mesmo que display: none pela folha de estilo do navegador, o que significa que qualquer regra CSS que defina display no elemento (por exemplo .card { display: flex; }) o sobrescreve e o elemento volta a aparecer. Acrescente [hidden] { display: none !important; } se isso atrapalhar você.

Para esconder algo visualmente mas mantê-lo para leitores de tela (o rótulo de um botão só com ícone, por exemplo), use uma classe "visually hidden" em vez de display: none.

display: flex e display: grid

Esses dois transformam um elemento em um contêiner de layout para os filhos:

display: flex dispõe os filhos em uma linha ou coluna, com controle de alinhamento e espaçamento. Veja flexbox.
display: grid posiciona os filhos em linhas e colunas ao mesmo tempo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>flex and grid</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .item { padding: 10px; background: #fde68a; border: 2px solid #f59e0b; text-align: center; }
    .flex { display: flex; gap: 8px; margin-bottom: 16px; }
    .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  </style>
</head>
<body>
  <div class="flex"><div class="item">flex 1</div><div class="item">flex 2</div><div class="item">flex 3</div></div>
  <div class="grid">
    <div class="item">grid 1</div><div class="item">grid 2</div><div class="item">grid 3</div>
    <div class="item">grid 4</div><div class="item">grid 5</div>
  </div>
</body>
</html>

O contêiner em si continua sendo um block. inline-flex e inline-grid fazem o mesmo pelos filhos, mas deixam o contêiner correr inline, como inline-block.

Os outros valores

Valor	O que faz
`flow-root`	Um block que contém os floats e impede que as margens dos filhos vazem; o "clearfix" moderno
`contents`	A caixa do próprio elemento some e os filhos agem como filhos do pai dele. Evite em botões, listas e tabelas: alguns navegadores descartam o significado do elemento para leitores de tela
`list-item`	Um block com marcador de lista, o padrão do `li`
`table`, `table-row`, `table-cell`	Layout de tabela em elementos que não são tabela
`inline-flex`, `inline-grid`	Um contêiner flex ou grid que fica inline

Erros comuns

Definir width ou height em um span ou a. Elementos inline os ignoram. Use inline-block ou block.
Margin vertical em um elemento inline. Também é ignorada. A solução é a mesma.
Usar display: none para esconder um texto destinado a leitores de tela. Ele fica escondido deles também.
Esperar que um filho apareça dentro de um pai com display: none. Nada dentro de um pai escondido é renderizado.
Uma regra de display sobrescrevendo o atributo hidden. A regra CSS vence.
Tentar animar o display. Definir display: none esconde o elemento na hora, sem fade; anime a opacity e troque o display (ou a visibility) no final.

Perguntas frequentes

Qual a diferença entre block, inline e inline-block?

Um elemento block começa em uma nova linha e ocupa a largura disponível. Um elemento inline corre dentro do texto e ignora width, height e margens verticais. inline-block corre dentro do texto como o inline, mas aceita largura, altura, padding e margens como um bloco.

O que display: none faz?

Remove o elemento da página por completo: ele não ocupa espaço, não é renderizado e fica escondido dos leitores de tela. Os filhos são escondidos junto e não podem ser exibidos com um display próprio.

Qual a diferença entre display: none e visibility: hidden?

display: none remove o elemento e o espaço dele. visibility: hidden o deixa invisível, mas mantém o espaço no layout, então nada se move.

Uma div é block ou inline por padrão?

Block. div, p, títulos, ul, section e form são block por padrão; span, a, strong, em, img, input e button são inline ou inline-block.

Por que elementos inline-block ficam com um espaço entre eles?

O espaço em branco entre as tags no HTML é renderizado como um espaço, igual ao espaço entre palavras. Use display: flex com gap no pai ou remova o espaço em branco.

Conceitos relacionados