Curso de CSS / display: block, inline, inline-block e ocultação

A propriedade display determina como um elemento gera caixas e participa do layout. Block, inline e inline-block se comportam de maneiras diferentes no fluxo normal; display: none remove a caixa, enquanto visibility: hidden mantém o espaço do layout.

Compare block, inline e inline-block

div·p geralmente é exibido como um bloco, e span·a geralmente é exibido em linha. Se você não der a um bloco uma largura separada, ele geralmente preencherá a largura disponível de seu elemento pai. Inline é colocado dentro de uma linha como letras em uma frase, permitindo que um conteúdo longo seja dividido em várias linhas. Um inline-block é tratado como uma única caixa colocada dentro de uma linha, então mesmo que o conteúdo dentro da caixa seja quebrado, a própria caixa não é dividida em várias partes como um inline comum.

.item { width: 120px; height: 48px; padding: 8px; margin: 8px; }
.blocks .item { display: block; }
.inlines .item { display: inline; }
.inline-blocks .item { display: inline-block; }

O exemplo inteiro dá o mesmo tamanho e margem aos mesmos três spans e apenas altera a exibição. block escreve uma nova linha para cada item, enquanto inline-block os coloca na mesma linha se houver espaço. A declaração de width·height de inline não faz o tamanho real da caixa do span de texto simples se tornar esse número, mesmo que permaneça na lista de estilos. Verifique a declaração calculada e o tamanho realmente usado separadamente.

Entenda o espaçamento inline e os elementos substituídos

Em inline regular, as margens e o preenchimento esquerdo e direito afetam o espaço dentro da linha. O preenchimento e as bordas superior e inferior podem ser desenhados, mas não determinam a altura da linha empurrando as linhas ao redor como os blocos. Se você der um grande preenchimento vertical a um texto com várias linhas, ele pode parecer sobreposto. Ao longo do exemplo, observamos a exibição permitindo alguma margem de manobra na altura da linha.

Não aplique “elementos inline não podem ter tamanho” a todos os elementos. Elementos substituídos, como img, exibem conteúdo externo e podem usar largura e altura mesmo quando sua exibição padrão é inline. O retângulo azul no exemplo tem 120 × 60px. Trate-o de forma diferente de um span de texto comum. O guia MDN sobre layout de bloco e inline explica o fluxo subjacente.

Compare display: none e visibility: hidden

DOM (Document Object Model, modelo de objetos do documento) é um modelo no qual os navegadores tratam documentos HTML como uma estrutura de elementos. Ocultar com CSS é diferente de deletar um elemento HTML. Parágrafos com display: none também podem ser encontrados em Elements nas ferramentas de desenvolvedor. Na linha com Front, o elemento-alvo e Back no exemplo completo, hidden deixa o espaço do alvo, enquanto none retira sua caixa e aproxima o texto seguinte. Um descendente de visibility: hidden pode reaparecer com visibility: visible. Com display: none no ancestral, os descendentes não geram caixas, mesmo que tenham visibility: visible.

Ocultar um elemento pode alterar o acesso pelo teclado e sua disponibilidade para tecnologias assistivas, assim como sua aparência. Este exercício compara o espaço da caixa em um documento estático. Para menus e controles reais, verifique também o gerenciamento de foco e se as informações necessárias continuam disponíveis. Veja MDN: display, MDN: visibility.

Alinhe caixas inline-block no fluxo normal

Como inline-block está dentro de uma linha de texto, ele é alinhado à linha de base da linha por padrão. Se você vir espaço vazio sob um item ou itens com alturas diferentes estiverem desalinhados, verifique vertical-align e line-height juntos. Até mesmo espaços em branco ou quebras de linha entre itens no HTML podem ser lacunas visíveis no posicionamento inline.

Mesmo que você altere a aparência com o display, o span não possui um significado de título ou o div não funciona como um botão. Escolha o HTML que se ajusta ao seu significado e defina sua colocação. Se você precisar gerenciar o alinhamento, espaçamento e tamanho de múltiplas caixas juntas, as regras que você aprenderá mais tarde em Flexbox·Grid podem ser mais apropriadas. Uma vez que você entenda o fluxo básico, fica mais fácil determinar como a disposição muda. Como posicionar itens ao longo de um eixo é abordado com um exemplo completo em Noções Básicas de Flexbox: Containers, Itens e Eixos. Como projetar linhas e colunas juntas é abordado com um exemplo completo em Noções Básicas de CSS Grid: Trilhas, Linhas e Colocação de Itens.

Execute o exemplo e altere um valor de cada vez

Salve o código abaixo como UTF-8 em display.html e abra-o. Os exemplos de imagens contêm dados SVG que podem ser executados sem um arquivo. Compare três métodos de posicionamento e três estados ocultos no mesmo documento.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparison of display and hiding</title>
  <style>
    * { box-sizing: border-box; }
    body { margin: 16px; color: #333; font: 16px/1.6 sans-serif; }
    .example { margin-block: 24px; padding: 8px; border: 1px dashed #777; }
    .item { width: 120px; height: 48px; padding: 8px; margin: 8px;
      border: 1px solid #a8653e; background: #ffe8dd; }
    .blocks .item { display: block; }
    .inlines { line-height: 3; }
    .inlines .item { display: inline; }
    .inline-blocks .item { display: inline-block; }
    .visibility-row { margin-block: 16px; padding: 8px; border: 1px solid #aaa; }
    .target { display: inline-block; width: 120px; height: 48px; background: #d9eee2; }
    .none .target { display: none; }
    .hidden .target { visibility: hidden; }
    .replaced { width: 120px; height: 60px; vertical-align: middle; }
  </style>
</head>
<body>
  <h1>Comparing block and inline elements</h1>
  <h2>block</h2><div class="example blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline</h2><div class="example inlines"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>inline-block</h2><div class="example inline-blocks"><span class="item">Item A</span><span class="item">Item B</span><span class="item">Item C</span></div>
  <h2>Comparing visible, hidden, and removed boxes</h2>
  <div class="visibility-row">Front <span class="target">Visible target</span> Back</div>
  <div class="visibility-row hidden">Front <span class="target">Hidden target</span> Back</div>
  <div class="visibility-row none">Front <span class="target">Target with no box</span> Back</div>
  <h2>An image as an inline replaced element</h2>
  <p>Front <img class="replaced" alt="A blue rectangle 120px wide and 60px tall." src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24'%3E%3Crect width='48' height='24' fill='%237ebad3'/%3E%3C/svg%3E"> Back</p>
</body>
</html>

1. Nas ferramentas de desenvolvimento, verifique o tamanho dos itens block e inline-block até suas bordas. É 120×48px devido à regra comum de border-box. Itens inline não têm largura fixa de 120px, mesmo que tenham a mesma declaração de largura.
2. Reduza a janela para ver se o terceiro item no inline-block pula para a próxima linha. Cada bloco começa em uma nova linha, mesmo em telas largas.
3. Desative temporariamente a declaração display: none da regra .none .target. Verifique se a posição das letras atrás dele muda quando o alvo aparece. Se você desativar a declaração de visibilidade hidden, o objeto aparecerá, mas o espaço originalmente reservado será mantido.
4. Altere apenas a largura da imagem para 160px. Ao contrário de um span inline comum, a caixa da imagem aceita essa largura. Confira suas dimensões nas ferramentas de desenvolvimento e restaure 120px. Mantendo a altura em 60px, a caixa passa de 120×60 para 160×60 e muda sua proporção; confira a caixa, pois o conteúdo de um SVG também pode ter regras internas de apresentação.

Se o posicionamento for diferente do esperado, verifique o valor final de display, o método de posicionamento do pai, o tamanho da caixa e a altura da linha. Em vez de adicionar repetidamente declarações de tamanho que não se aplicam, é útil primeiro distinguir entre tipos de elementos e fluxos básicos.