Margin

O Tailwind CSS oferece classes utilitárias para aplicar margens externas aos elementos de forma clara e precisa. Essas classes seguem uma convenção simples, baseada em direções (t, r, b, l, x, y) e valores da escala padrão do Tailwind.

Sintaxe das classes de margem

m     => margin (todos os lados)  
mx    => margem horizontal (esquerda e direita)  
my    => margem vertical (superior e inferior)  
mt    => margem superior  
mr    => margem direita  
mb    => margem inferior  
ml    => margem esquerda

Exemplos de uso

<!-- Margem em todos os lados -->
<div class="m-4">Espaço em volta</div>

<!-- Margem vertical -->
<div class="my-6">Espaço acima e abaixo</div>

<!-- Margem esquerda e direita -->
<div class="mx-2">Espaço nas laterais</div>

<!-- Margens específicas -->
<div class="mt-8 mb-4 ml-6 mr-0">Margens específicas por lado</div>

Valores disponíveis

As margens usam a mesma escala de espaçamento do Tailwind:

m-0, m-1, m-2, ..., m-96
m-px: aplica 1px de margem
m-auto: centraliza horizontalmente (quando usado com mx-auto)
Valores negativos: -m-1, -mt-4, etc.

<!-- Exemplo de centralização -->
<div class="mx-auto w-1/2">Centralizado horizontalmente</div>

<!-- Exemplo com margem negativa -->
<div class="-mt-2">Subiu 2 unidades do topo</div>

Uso comum para espaçamento entre blocos

<h2 class="text-xl font-bold mb-4">Título</h2>
<p class="text-gray-700 mb-6">Parágrafo com espaço abaixo.</p>
<button class="bg-blue-600 text-white px-4 py-2">Botão</button>

Neste exemplo, mb-4 e mb-6 controlam o espaçamento entre os elementos sem necessidade de classes personalizadas.

As classes de margem são essenciais para definir o posicionamento externo de blocos e componentes, criando separações claras e ajustáveis conforme o layout exige.