Espaçamento

No Tailwind CSS, o controle de espaçamento é feito por meio de utilitárias específicas para margens (m-*), preenchimentos internos (p-*) e espaçamento entre elementos em layouts com flex ou grid (gap-*).

Essas utilitárias seguem uma escala predefinida e consistente, que permite criar layouts com harmonia visual e sem a necessidade de valores arbitrários.

---

Escala de espaçamento

Tailwind adota uma escala baseada em múltiplos de 4px, convertidos para rem:

Classe	Valor em rem	Valor em px
0	0	0px
1	0.25rem	4px
2	0.5rem	8px
3	0.75rem	12px
4	1rem	16px
5	1.25rem	20px
6	1.5rem	24px
8	2rem	32px
10	2.5rem	40px
12	3rem	48px
16	4rem	64px
20	5rem	80px
24	6rem	96px
32	8rem	128px
40	10rem	160px
auto	automático	depende do conteúdo

Essa escala pode ser estendida ou personalizada no arquivo tailwind.config.js, mas para a maioria dos casos ela cobre bem os cenários comuns de layout.

---

Tipos de espaçamento

Margin

A margem controla o espaçamento externo entre elementos.

Exemplos:

• m-4: aplica margem em todos os lados

• mt-2: margem superior

• mx-auto: margem horizontal automática (centraliza)

Ver mais em: fundamentos/espaçamento/margin

---

Padding

O padding define o espaçamento interno do elemento.

Exemplos:

• p-4: aplica padding em todos os lados

• pl-2: padding à esquerda

• py-6: padding vertical

Ver mais em: fundamentos/espaçamento/padding

---

Gap

gap é usado para definir o espaçamento entre elementos filhos de um container flex ou grid.

Exemplos:

• gap-4: espaço uniforme entre colunas e linhas

• gap-x-2: espaço horizontal entre colunas

• gap-y-8: espaço vertical entre linhas

Ver mais em: fundamentos/espaçamento/gap

---

Essas três formas de controle de espaçamento podem ser usadas combinadas para criar layouts limpos, modulares e com bom espaçamento interno e externo, sem precisar escrever nenhuma linha de CSS tradicional.