Espaçamento

No Laboratório Belavista, cartazes empilhados na vitrine precisam de ar entre um e outro — sem empurrar o bloco inteiro para fora do layout. Espaçamento é margem, padding e, em Flex/Grid, gap.

O exemplo deste capítulo é 34-espacamento, no pacote que acompanha o volume. Mude só o gap da lista, preveja a distância entre fichas, recarregue e confira. Ciclo: ler → digitar → mudar → prever → recarregar → conferir.

O que você vai aprender

• Distinguir margem (fora) e padding (dentro).
• Usar atalhos físicos e lógicos de margem/padding.
• Preferir gap entre irmãos em Flex ou Grid.
• Evitar   e <br> só para “fazer espaço”.
• Prever colapso de margem entre blocos.

Margem e padding

Padding é o colchão interno: o fundo do elemento o preenche. Margem é o vão externo até o vizinho: o fundo do elemento não a pinta.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Espaçamento — Laboratório Belavista</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
      <h1>Vitrine da semana</h1>
      <ul class="vitrine">
        <li class="ficha">Cartaz serigráfico</li>
        <li class="ficha">Tipografia móvel</li>
        <li class="ficha">Papel kraft</li>
      </ul>
    </main>
  </body>
</html>

.ficha {
  margin-block: 0;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  border: 1px solid #1a1a1a;
  background: #f7f4ef;
}

.vitrine {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

Atalhos

margin: 1rem aplica os quatro lados. Dois valores: bloco e linha (margin: 1rem 2rem). Quatro valores (físico): topo, direita, baixo, esquerda — TRouBLe. Em projetos novos, prefira lógicos: margin-block, padding-inline.

.cartaz {
  margin-block: 1.5rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  max-inline-size: 36rem;
}

Gap entre irmãos

Se o objetivo é só o espaço entre as fichas, gap no pai Flex/Grid costuma ser mais limpo que margin-bottom em cada filho (que ainda sobra no último).

Erro comum: empilhar margin-bottom: 1rem em todos os .ficha e depois se surpreender com um vão extra no fim da lista. Com gap, o vão fica só entre itens.

HTML não é régua

<br> quebra linha de texto. <hr> separa temas com significado.   cola palavras sem quebra. Nenhum deles substitui o sistema de espaçamento do CSS no layout do Belavista.

Colapso de margem

Entre dois blocos adjacentes, margens verticais podem colapsar: sobra a maior, não a soma. Padding e borda “interrompem” esse efeito. Inspecione nas DevTools se o vão não bater com a soma que você fez de cabeça.

Critério para avançar

Você avança se: separa margem de padding em uma frase; troca margem entre irmãos por gap no exemplo; muda um valor e prevê o resultado antes de recarregar.

Confira o exemplo completo

A captura mostra o exemplo desta etapa. Abra a pasta completa, mude uma coisa e confira no navegador antes de seguir.

Atividades

1. Qual propriedade pinta o fundo do elemento: margem ou padding?
2. Por que gap ajuda numa lista Flex de fichas?
3. Dois blocos com margin-block-end: 20px e margin-block-start: 30px adjacentes: quanto de vão costuma sobrar no eixo de bloco (colapso clássico)?

Respostas comentadas

1. Padding. A margem fica fora da borda.
2. Controla só o espaço entre itens, sem margem “fantasma” no último.
3. Em geral 30px (a maior), não 50px — margens de bloco adjacentes colapsam.