Fluxo e display

Este capítulo explica como o navegador empilha as caixas da Oficina Costeira. A Oficina Costeira é um coletivo fictício de design em João Pessoa. O HTML é lido de cima para baixo. O fluxo decide quem fica ao lado de quem.

O exemplo está em exemplos/24-fluxo-e-display/. Toda página usa lang="pt-BR". Este volume tem 52 capítulos.

display muda a participação no fluxo. Não muda o significado da tag. O ciclo: ler, copiar, mudar uma coisa, prever, recarregar, conferir.

O que você vai aprender

• Descrever o fluxo normal.
• Reconhecer inline, block, inline-block e none.
• Ver o modelo de layout como escolha (fluxo, float, flex, grid).
• Centralizar linha e centralizar bloco.
• Aumentar alvo de link com inline-block.
• Não usar display para fingir semântica.

O fluxo lê como um texto

O navegador lê o HTML de cima para baixo. Tenta colocar cada caixa depois da anterior. Se não cabe, ou se o display manda, a caixa desce.

É o mesmo wrapping de um parágrafo no editor. Palavras (caixas em linha) preenchem a linha. Parágrafos (caixas em bloco) começam outra.

Um <br> força a quebra. CSS display também. Largura insuficiente também.

O fluxo normal é o modelo inicial. Float tira a caixa desse fluxo (capítulo 25). Flexbox cria um contexto novo no pai (capítulo 26). Grid cria outro, mais tarde. Position ainda outro. Você escolhe o modelo por problema, não por moda.

Neste volume:

• fluxo e display — comportamento básico;
• float — só texto ao redor de imagem;
• Flexbox — cabeçalho, menu, faixas e colunas da página.

O arquivo de origem desta série listava os modelos num panorama. A regra prática da Oficina Costeira é simples. Comece no fluxo. Mude o display de um botão se o alvo for pequeno. Só então abra um container flex no pai. Grid espera o capítulo própria. Position espera a dela. Não empilhe os quatro modelos no mesmo div.

inline: na linha do texto

Elementos em linha sentam no texto. Ocupam a largura do conteúdo. width e margens verticais quase não se comportam como no bloco.

Exemplos nativos: a, span, strong, em, cite, time.

<p>A <a href="agenda.html">agenda fictícia</a> sai em <time datetime="2026-09-20">20 de setembro</time>.</p>

O link não começa uma linha nova. O time também não. Padding horizontal no a em linha até “funciona”, mas o alvo vertical fica miúdo. Por isso o menu usa outro display.

img no HTML clássico se comporta de um jeito próximo da linha. O reset do exemplo põe display: block nas imagens para evitar o vão de linha de base. Isso é escolha do main.css, não da tag.

block: linha própria

Bloco começa numa linha nova e tenta usar a largura do pai.

Exemplos nativos: h1–h6, p, ul, ol, li, header, nav, main, footer, article, section, div.

p {
  display: block; /* já é o inicial da tag */
  max-width: 65ch;
}

width, margin e padding nos quatro lados funcionam. É o terreno do modelo de caixa do capítulo 23.

Você pode forçar um span a virar bloco. Ele continua sendo span. O NVDA não o trata como título. display não cria h2.

span.aviso {
  display: block;
  padding: 0.75rem;
  border: 1px solid #c45c26;
}

Útil para um recado. Inútil para fingir capítulo.

inline-block: o híbrido

inline-block fica na linha como o inline e aceita largura, altura e padding como o bloco.

Nativos comuns: button. Imagens, conforme o CSS.

.menu a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
}
.botao {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 1px solid #c45c26;
}

O padding vira alvo de clique. O capítulo 17 pediu isso. inline puro não entrega o mesmo retângulo.

Há um vão entre inline-block vizinhos, vindo dos espaços e quebras no HTML. Não construa a grade da página com isso. O menu da Oficina Costeira já usa Flexbox no ul, o que elimina o vão. Se um exercício ainda empilhar inline-block, o espaço extra não é “margem misteriosa”: é o caractere de espaço.

none: some de verdade

display: none tira a caixa do fluxo e da árvore acessível. Como se o HTML não estivesse lá para o NVDA.

.rascunho {
  display: none;
}

Não use none no skip-link inicial. Não use para “esconder do olho e deixar o leitor ver”: isso é .visually-hidden do capítulo 17.

visibility: hidden esconde a vista e reserva o espaço. É outro mecanismo. Agora, fique com none quando a coisa não deve existir para ninguém.

hidden no HTML combina com isso. Prefira o atributo quando o recado for “este bloco não vale nesta página”.

Centralizar depende do display

Texto e caixas em linha centram com text-align: center no pai.

.hero {
  text-align: center;
}

O h1 em bloco, sem largura menor, continua ocupando 100%. O texto dentro dele centra. A caixa em si não “anda”.

Bloco com largura menor que o pai centra com margem automática horizontal.

.cartaz {
  display: block;
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
}

auto nos dois lados divide o espaço que sobra. Sem width ou max-width menores que o pai, não há espaço sobrando e o bloco não centra.

Um menu horizontal antigo usava li { display: inline; }. Funciona. O alvo continua magro. O volume prefere Flexbox no ul, com a em inline-block por causa do padding. Os dois conhecimentos se complementam: você lê o fluxo e, no capítulo 26, troca o empilhamento nativo da lista.

<nav aria-label="Principal">
  <ul class="menu">
    <li><a href="index.html">Início</a></li>
    <li><a href="projetos.html">Projetos</a></li>
    <li><a href="equipe.html">Equipe</a></li>
  </ul>
</nav>

.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
}

Sem flex, os li ainda empilham, porque li é bloco. Com li { display: inline; } eles sentam na linha e o vão do espaço HTML aparece. Anote o vão. Não perca tempo matando espaço com fonte zero. O capítulo 26 some com o problema no pai.

Pare e experimente. No .botao, mude só display de inline-block para inline. Preveja: o padding vertical quase some do alvo. Recarregue, passe o mouse, confira. Devolva inline-block.

Erro comum: display: flex em tudo “para centralizar”. Flex é o capítulo 26. Primeiro saiba se você está centrando texto, bloco ou itens de um pai flex.

Mapa rápido dos modelos, só para orientar:

• fluxo + display — documento, parágrafos, botão;
• float — imagem com texto ao redor;
• Flexbox — alinhar filhos de um pai (menu, faixa, cartões em linha);
• Grid — grade de duas dimensões, mais adiante no volume.

A próximo capítulo isola o float para o caso honesto: recorte de imagem e texto.

Atividades

1. display: block num a tira o papel de link? Por quê?
2. Por que o volume põe display: inline-block nos links do menu?
3. Qual a diferença entre display: none e .visually-hidden?
4. Como centrar um bloco .cartaz de max-width: 22rem?
5. Por que não montar as colunas da home com inline-block?

Respostas comentadas

1. Não. display muda o fluxo. A tag a continua sendo enlace para o teclado e para o NVDA.
2. O padding passa a formar um retângulo de clique maior, ainda na mesma linha do menu.
3. none esconde de vista e de leitor. .visually-hidden tira da tela e deixa o nome para o NVDA.
4. margin-left: auto; margin-right: auto (ou margin-inline: auto) com largura limitada.
5. O vão dos espaços no HTML e a fragilidade da linha quebram a grade. Flexbox no pai resolve o alinhamento. Float não é grade neste volume.

Referências

• Fluxo normal
• display
• Bloco e linha
• inline-block
• Centralizando

O arquivo completo

Referência do exemplo 24-fluxo-e-display, reproduzida aqui para que você possa conferir sem sair da página.

assets/javascript/simulacao.js

const form=document.querySelector("#simulacao");if(form){form.querySelector("button[type=submit]").disabled=false;form.addEventListener("submit",event=>{event.preventDefault();document.querySelector("#retorno").textContent="Simulação concluída. Nada foi enviado ou guardado.";});}