Espaçamento no Tailwind: padding, margin, gap e tamanho

No Tailwind, p-4 significa padding de uma unidade da régua multiplicada por quatro; no tema padrão, o resultado é 1rem. O número é passo de escala, não quantidade de pixels. Entender essa frase impede a maior parte dos “espaços misteriosos” no primeiro projeto.

A clínica desta lição precisa organizar fichas sem números aleatórios. Você vai separar espaço interno, espaço entre vizinhos e limites de largura, sempre conferindo o CSS que o CLI 4.3.3 gerou.

A régua começa em --spacing

O tema padrão define uma unidade-base. Utilitários numéricos multiplicam essa variável.

<article class="p-4">Ficha de Luna</article>

Com --spacing: 0.25rem, quatro passos chegam a 1rem, normalmente 16px no tamanho de fonte raiz padrão. Não grave “4 vale 16px” sem o contexto: o tema ou o tamanho raiz podem mudar.

Padding escolhe lados; margin escolhe distância externa

p-4 aplica os quatro lados. px-4 atua no eixo inline; py-2, no eixo block. Os nomes lógicos acompanham modos de escrita melhor que decorar esquerda e direita.

<button class="px-4 py-2">Confirmar</button>

Margin repete a família com m, mx, my, ms, me, mt, mr, mb e ml. Use-a para separar uma caixa do entorno, não para criar respiro interno. Se box model ainda confunde, revise padding e margin no CSS antes de empilhar classes.

<section class="mx-auto mt-8 max-w-5xl p-4">Agenda</section>

mx-auto é um caso especial: margens inline automáticas centralizam uma caixa que possui largura máxima. Sem max-w-* ou outra largura menor que o pai, não existe sobra lateral para dividir.

gap separa irmãos sem criar borda torta

Quando filhos pertencem ao mesmo Flexbox ou Grid, prefira gap. A lacuna nasce no container e só existe entre itens.

<ul class="flex flex-col gap-4">
  <li>Consulta de Luna</li>
  <li>Retorno de Thor</li>
</ul>

Pense numa estante com divisórias uniformes: gap define o intervalo entre prateleiras, enquanto margin viaja grudada em cada caixa. A comparação deixa de servir quando uma distância precisa pertencer semanticamente a um item, como mt-auto empurrando a ação de um cartão. Para layout completo, continue em Flexbox com Tailwind.

Largura, altura e size-* usam a mesma linguagem

w-full ocupa 100% da largura disponível. h-5 usa a escala. size-10 escreve largura e altura juntas, ótimo para avatar quadrado e ícone clicável.

<img class="size-10 rounded-full" src="/avatar.webp" alt="Veterinária Ana">

O CSS medido foi este:

Não aplique size-* a conteúdo cujo texto pode crescer. Botão precisa de min-height e padding, não quadrado rígido. A utilidade expressa uma decisão; ela não sabe se a decisão serve para aquele conteúdo.

Limites impedem linhas longas e layouts espichados

Uma combinação frequente ocupa a largura disponível até um teto. Para texto, max-w-prose vale 65 caracteres tipográficos (65ch) no CSS gerado.

<p class="w-full max-w-prose leading-7">
  Orientações para o período depois da consulta.
</p>

Use min-w-0 em filhos flexíveis que precisam encolher. Sem ele, uma palavra longa ou uma URL pode manter o tamanho mínimo do conteúdo e estourar o cartão. Esse erro parece espaçamento, mas é restrição de tamanho.

Frações e proporções não substituem o conteúdo

Classes como w-1/2 e basis-1/3 geram percentuais. aspect-video fixa uma proporção 16:9, útil para mídia com dimensão variável.

<aside class="basis-1/3 flex-none">Resumo</aside>
<div class="aspect-video w-full">Prévia</div>

No Flexbox, basis-1/3 é o tamanho inicial; shrink ainda pode reduzi-lo se você não usar flex-none. No Grid, prefira descrever colunas no container em vez de dar frações independentes a cada filho.

Valor arbitrário é exceção explícita

Uma medida inexistente entra entre colchetes. O compilador preservou exatamente 13px no teste:

<div class="p-[13px]">Aviso legado</div>

O valor resolve integração com um widget legado. Se aparece novamente, deixou de ser exceção e merece um token no tema. Uma sequência de p-[13px], gap-[13px] e mt-[13px] é uma escala paralela sem nome.

Trocar a unidade-base exige intenção

Você pode redefinir a régua no @theme, mas isso altera muitas famílias ao mesmo tempo.

@theme {
  --spacing: 0.2rem;
}

Agora p-4, gap-4, size-10 e leading-7 mudam. Faça isso no início de um design system, nunca como correção pontual de uma tela. Antes e depois, compile um conjunto conhecido e confira as regras.

Erro reproduzido: nome sem posição na escala

p-grande parece descritivo, mas não pertence à escala padrão nem foi definido no tema. O teste foi executado com o CLI 4.3.3:

@import "tailwindcss";
.qa { @apply p-grande; }

printf '@import "tailwindcss"; .qa { @apply p-grande; }\n' | npx @tailwindcss/cli@4.3.3 -i - -o /dev/null

O comando terminou com código 1. Escolha um passo real, como p-6, ou declare um token de spacing antes de tratá-lo como utility.

Missão da ficha sem número mágico

Monte um cartão com p-6, filhos em gap-4, avatar size-10 e texto max-w-prose. A missão termina quando nenhum filho usa margin apenas para simular o intervalo entre irmãos e quando p-[13px] aparece, no máximo, no widget legado explicado no código. Depois aplique a mesma régua em tipografia no Tailwind e compare como espaçamento e altura de linha constroem ritmo juntos.

Faça um inventário antes de mudar a régua

Abra três telas representativas e anote os passos realmente usados para padding, gap, altura de controle e largura máxima. Agrupe por função: respiro de cartão, intervalo entre campos, distância entre seções e tamanho de alvo interativo. Um passo aparecer muitas vezes não prova que ele deve dominar todos os papéis; pode apenas revelar cópia sem revisão.

Depois procure extremos. Valores muito próximos, como 13px e 14px arbitrários, podem ser consolidados. Valores muito grandes podem esconder uma composição errada: uma seção com mt-32 talvez precise de padding no container ou de um ritmo de página compartilhado. Mude um grupo por vez e teste conteúdo longo, zoom e telas estreitas.

Conecte spacing a cor e tipografia. Um cartão com fundo quase igual ao entorno pode parecer sem espaço mesmo com padding correto; um parágrafo com leading apertado parece mais denso que a medida indica. A escala de cores e o guia da trilha ajudam a revisar o sistema como conjunto, não como uma sequência de números isolados.

Registre o antes e o depois com a mesma largura e o mesmo conteúdo. Sem esse controle, uma quebra de linha pode parecer mudança de spacing e contaminar a decisão.