Entender o fluxo e o espaço das caixas

Neste capítulo você vai prever a posição de um bloco e ajustar o espaço de um cartão. O objetivo é terminar uma tarefa pequena e conferir seu resultado no Mirante do Mucuripe.

Seu ponto de partida

Estude depois do capítulo 01. Retome a referência se uma experiência anterior ficou alterada. Use o exemplo 02-fluxo-caixas do pacote anexo e copie inicio/ para uma pasta de prática fora do original. A raiz do exemplo é a referência completa desta etapa. Você não precisa copiar arquivos da etapa anterior.

Abra index.html da sua cópia no navegador e o mesmo arquivo num editor de texto simples. Para mídia, ferramenta de conferência e JSON, use o teste HTTP local explicado no README. Abrir ou testar não publica a página.

Como praticar

Leia a explicação e digite ou confira o código indicado. Mude uma coisa. Anote sua previsão antes de salvar e recarregar. Compare o resultado e investigue o erro antes de avançar. Ao terminar cada experiência, restaure somente a mudança indicada, para que a próxima parta dos valores da referência. Você pode parar depois de uma lição.

O fluxo é a ordem normal do conteúdo

Fluxo é a forma normal de organizar elementos sem posicionamento especial. Um article de cartão ocupa seu lugar depois do anterior. O navegador calcula sua altura pelo conteúdo. Acrescentar texto pode empurrar o que vem depois. Isso é útil: a página cresce sem esconder palavras. Altura fixa pode funcionar num texto curto e cortar a leitura quando o aluno amplia a página. Não tente fazer todos os cartões parecerem iguais antes de entender o conteúdo. Primeiro observe a ordem no HTML e a ordem na tela.

Faça na sua cópia

Localize o parágrafo do cartão Leitura. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

<article class="card">
  <h3>Leitura às 10h</h3>
  <p>Escolha um texto curto e converse sobre ele.</p>
</article>

Mude uma coisa e preveja

Acrescente somente uma frase longa ao parágrafo da Leitura.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O cartão cresce e a parte seguinte acompanha esse crescimento. Não há texto sobreposto.

Se não acontecer

Procure height fixa ou posicionamento colocado por experiência anterior. Restaure a referência antes de investigar outra regra.

Espaço interno e espaço externo

Padding cria espaço entre o conteúdo e a borda. Margin cria espaço em relação ao que está fora da caixa. Border desenha o limite. A regra do cartão reúne esses valores para facilitar a comparação. Rem é uma unidade ligada ao tamanho da fonte da raiz; aqui 1rem acompanha a configuração de texto do navegador. Não altere padding e margin juntos, porque ficaria difícil identificar a causa do resultado. O valor da referência é um ponto de partida, não uma medida universal para todo componente.

Faça na sua cópia

Confira a regra .card em assets/styles.css. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

.card {
  padding: 1rem;
  border: 1px solid #627b7b;
  margin-block: 1rem;
  background: white;
}

Mude uma coisa e preveja

Troque somente padding: 1rem por padding: 1.5rem.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

O texto fica mais distante da borda do cartão; a alteração não é um espaço extra entre letras.

Se não acontecer

Confira a chave de fechamento e o seletor .card. Não coloque o valor em body se a tarefa é mudar só os cartões.

A largura precisa contar borda e preenchimento

Box-sizing define como uma largura declarada é medida. Border-box inclui borda e padding dentro dessa largura. Isso facilita prever o tamanho de um campo ou cartão. A regra usa o seletor * para atingir todos os elementos. Ela não impede toda forma de transbordamento: palavras sem quebra ou um recurso com largura mínima muito grande ainda podem ultrapassar a tela. Portanto a regra é uma ajuda, não uma aprovação automática da página. Confira sempre o resultado estreito depois de aumentar espaços.

Faça na sua cópia

Confira a primeira regra da folha. A implementação completa está no pacote de exemplos que acompanha este volume. Confira o trecho no seu contexto antes de mudar.

* { box-sizing: border-box; }

Mude uma coisa e preveja

Mantenha a regra e aumente somente a borda do cartão de 1px para 4px.

Anote o que espera observar antes de salvar e recarregar.

Recarregue e confira

A borda engrossa sem criar um cartão maior que a área disponível. Restaure 1px depois de conferir.

Se não acontecer

Não retire box-sizing para corrigir um problema sem entender a largura. Confira também se a folha correta está carregada.

A captura mostra uma parte da referência. Abra o exemplo para conferir a página inteira. Uma experiência temporária pode produzir outra aparência; restaure os valores antes de comparar.

Atividades para fazer antes das respostas

Use uma nova cópia da base. Tente primeiro; depois compare seus resultados com os comentários.

1. Compare padding e margin alterando um por vez.

2. Acrescente conteúdo ao primeiro cartão e descreva a posição do segundo.

3. Explique o que border-box ajuda a prever e o que ele não garante.

Respostas comentadas

Compare o que você previu com o que observou. Uma solução diferente pode funcionar se mantiver o conteúdo e a tarefa acessíveis.

1. Padding afasta o texto da borda; margin afasta a caixa de outras caixas. Alterar os dois ao mesmo tempo mistura causas.

2. O primeiro cresce e o segundo continua depois dele no fluxo. O HTML não precisou calcular uma posição vertical fixa.

3. Border-box inclui borda e preenchimento na largura declarada. Ainda é preciso conferir conteúdo longo, recursos e largura mínima.

Quando seguir

Você reconhece fluxo, espaço interno e externo e confere um cartão com texto maior. Se ainda houver dúvida, repita somente a experiência que precisa esclarecer.

O arquivo completo

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

index.html

<!doctype html>
<html lang="pt-BR">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mirante do Mucuripe | Prática de front-end</title><link rel="stylesheet" href="assets/styles.css"></head>
<body><a class="pular" href="#conteudo">Pular para o conteúdo</a>
<header><p>Um pouco além do Webdev</p><h1>Mirante do Mucuripe</h1><p class="ficticio">Espaço cultural fictício em Fortaleza.</p>
<nav aria-label="Nesta página"><a href="#sobre">Sobre</a><a href="#agenda">Agenda</a><a href="#visitar">Orientações</a></nav></header>
<main id="conteudo" tabindex="-1"><section class="hero" aria-labelledby="sobre"><h2 id="sobre">Um lugar para aprender e criar</h2><p>O Mirante do Mucuripe reúne leitura, oficinas e conversas em Fortaleza.</p><p>Esta página é uma prática de curso. Não representa um espaço real.</p></section><section aria-labelledby="agenda"><h2 id="agenda">Agenda de prática</h2><p>Horários inventados, sem reserva ou inscrição real.</p><div class="cards"><article class="card"><h3>Leitura às 10h</h3><p>Escolha um texto curto e converse sobre ele.</p></article><article class="card"><h3>Oficina às 14h</h3><p>Experimente uma mudança pequena no seu projeto.</p></article></div></section><section aria-labelledby="visitar"><h2 id="visitar">Antes de visitar</h2><p>Local fictício em Fortaleza. A descrição é apenas um exercício, sem endereço real.</p><ul><li>Leia o horário na agenda.</li><li>Confira a descrição da atividade.</li></ul></section></main><footer><p>Mirante do Mucuripe. Conteúdo fictício para estudo.</p></footer>
</body></html>

assets/styles.css

* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; background: #fbf8f0; color: #173d40;
  font-family: Arial, sans-serif; font-size: 1rem; line-height: 1.65; }
header, main, footer { max-width: 64rem; margin-inline: auto; padding: 1.25rem; }
header { background: #e6eee9; border-bottom: 3px solid #235b5b; }
h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); line-height: 1.2; }
h2, h3 { line-height: 1.3; }
a { color: #175b65; text-underline-offset: .2em; }
p { max-width: 65ch; }
nav a { display: inline-block; margin: .25rem .7rem .25rem 0; }
:focus-visible { outline: 3px solid #a33e10; outline-offset: 3px; }
.pular { position: absolute; top: -8rem; left: 1rem; background: white; padding: .7rem; z-index: 10; }
.pular:focus { top: .5rem; }
section { margin-block: 2rem; scroll-margin-top: 1rem; }
.ficticio { font-weight: bold; color: #713014; }
img, video { max-width: 100%; height: auto; }
audio { max-width: 100%; }
figure { margin: 1rem 0; }
figcaption { font-size: .95rem; }
button, input, textarea { font: inherit; }
input, textarea { display: block; width: 100%; max-width: 32rem; padding: .6rem;
  border: 2px solid #627b7b; border-radius: .3rem; background: white; color: #173d40; }
button { padding: .6rem 1rem; border: 2px solid #235b5b; border-radius: .35rem;
  background: #235b5b; color: white; cursor: pointer; margin: .3rem .3rem .3rem 0; }
button:disabled { cursor: default; opacity: .65; }
[hidden] { display: none !important; }
.card, li { overflow-wrap: anywhere; }
pre { overflow-x: auto; }

.card { padding: 1rem; border: 1px solid #627b7b; margin-block: 1rem; background: white; }