Margem no Tailwind CSS
Tailwind Margin permite que você adicione espaço ao redor dos elementos sem ter que escrever CSS personalizado. Neste artigo, exploraremos a margem do Tailwind e como ela pode ser usada para criar layouts eficazes com exemplos .

Margin é uma propriedade CSS que cria espaço ao redor de um elemento.
Ele determina a quantidade de espaço entre a borda de um elemento e os elementos adjacentes no layout.
Você pode definir a propriedade de margem para cada lado do elemento individualmente (superior, direito, inferior e esquerdo) ou para todos os lados juntos.
Classes de margem de vento de cauda
A propriedade de margem do Tailwind pode ser definida especificando várias classes, cada uma com um valor específico.
| Aulas | Visão geral | 
| m-0 | Esta classe é usada para definir a margem em todos os lados de um elemento como 0. | 
| mx-0 | Esta classe é usada para definir a margem horizontal de um elemento como 0. | 
| meu-0 | Esta classe é usada para definir a margem vertical de um elemento como 0. | 
| mt-0 | Esta classe é usada para definir a margem superior de um elemento como 0. | 
| senhor-0 | Esta classe é usada para definir a margem direita de um elemento como 0. | 
| mb-0 | Esta classe é usada para definir a margem inferior de um elemento como 0. | 
| ml-0 | Esta classe é usada para definir a margem esquerda de um elemento como 0. | 
| m-px | Usando esta classe, a margem em todos os lados é definida como 1px. | 
| mx-px | Usando esta classe, a margem horizontal é definida como 1px. | 
| meu-px | Usando esta classe, a margem vertical é definida como 1px. | 
| mt-px | Usando esta classe, a margem superior é definida como 1px. | 
| sr-px | Usando esta classe, a margem direita é definida como 1px. | 
| mb-px | Usando esta classe, a margem inferior é definida como 1px. | 
| ml-px | Usando esta classe, a margem esquerda é definida como 1px. | 
| m-0,5 | A margem em todos os lados é definida como 0,125 rem ou 2px. | 
| mx-0,5 | A margem horizontal é definida como 0,125 rem ou 2px. | 
| meu-0,5 | A margem vertical é definida como 0,125 rem ou 2px. | 
| mt-0,5 | A margem superior é definida como 0,125 rem ou 2px. | 
| mr-0,5 | A margem direita é definida como 0,125 rem ou 2px. | 
| mb-0,5 | A margem inferior é definida como 0,125 rem ou 2px. | 
| ml-0,5 | A margem esquerda é definida como 0,125 rem ou 2px. | 
| m-1 | A margem em todos os lados é definida como 0,25 rem ou 4px. | 
| mx-1 | A margem horizontal é definida como 0,25 rem ou 4px. | 
| meu-1 | A margem vertical é definida como 0,25 rem ou 4px. | 
| mt-1 | A margem superior é definida como 0,25 rem ou 4px. | 
| senhor-1 | A margem direita é definida como 0,25 rem ou 4px. | 
| mb-1 | A margem inferior é definida como 0,25 rem ou 4px. | 
| ml-1 | A margem esquerda é definida como 0,25 rem ou 4px. | 
| m-1,5 | A margem em todos os lados é definida como 0,375 rem ou 6px. | 
| mx-1,5 | A margem horizontal é definida como 0,375 rem ou 6px. | 
| meu-1.5 | A margem vertical é definida como 0,375 rem ou 6px. | 
| mt-1,5 | A margem superior é definida como 0,375 rem ou 6px. | 
| mr-1.5 | A margem direita é definida como 0,375 rem ou 6px. | 
| mb-1.5 | A margem inferior é definida como 0,375 rem ou 6px. | 
| ml-1,5 | A margem esquerda é definida como 0,375 rem ou 6px. | 
| m-2 | A margem em todos os lados é definida como 0,5 rem ou 8px. | 
| mx-2 | A margem horizontal é definida como 0,5 rem ou 8px. | 
| meu-2 | A margem vertical é definida como 0,5 rem ou 8px. | 
| mt-2 | A margem superior é definida como 0,5 rem ou 8px. | 
| senhor-2 | A margem direita é definida como 0,5 rem ou 8px. | 
| mb-2 | A margem inferior é definida como 0,5 rem ou 8px. | 
| ml-2 | A margem esquerda é definida como 0,5 rem ou 8px. | 
| m-2,5 | A margem em todos os lados é definida como 0,625 rem ou 10px. | 
| mx-2.5 | A margem horizontal é definida como 0,625 rem ou 10px. | 
| meu-2.5 | A margem vertical é definida como 0,625 rem ou 10px. | 
| mt-2.5 | A margem superior é definida como 0,625 rem ou 10px. | 
| mr-2.5 | A margem direita é definida como 0,625 rem ou 10px. | 
| mb-2.5 | A margem inferior é definida como 0,625 rem ou 10px. | 
| ml-2,5 | A margem esquerda é definida como 0,625 rem ou 10px. | 
| m-3 | A margem em todos os lados é igual a 0,75rem ou 12px. | 
| mx-3 | A margem horizontal é igual a 0,75rem ou 12px. | 
| meu-3 | A margem vertical é igual a 0,75rem ou 12px. | 
| mt-3 | A margem superior é igual a 0,75rem ou 12px. | 
| senhor-3 | A margem direita é igual a 0,75rem ou 12px. | 
| mb-3 | A margem inferior é igual a 0,75rem ou 12px. | 
| ml-3 | A margem esquerda é igual a 0,75rem ou 12px. | 
| m-3,5 | A margem em todos os lados é especificada como 0,875 rem ou 14px. | 
| mx-3.5 | A margem horizontal é especificada como 0,875 rem ou 14px. | 
| meu-3.5 | A margem vertical é especificada como 0,875 rem ou 14px. | 
| mt-3.5 | A margem superior é especificada como 0,875 rem ou 14px. | 
| mr-3.5 | A margem direita é especificada como 0,875 rem ou 14px. | 
| mb-3.5 | A margem inferior é especificada como 0,875 rem ou 14px. | 
| ml-3,5 | A margem esquerda é especificada como 0,875 rem ou 14px. | 
| m-4 | A margem em todos os lados é definida como 1rem ou 16px. | 
| mx-4 | A margem horizontal é definida como 1rem ou 16px. | 
| meu-4 | A margem vertical é definida como 1rem ou 16px. | 
| mt-4 | A margem superior é definida como 1rem ou 16px. | 
| senhor-4 | A margem direita é definida como 1rem ou 16px. | 
| mb-4 | A margem inferior é definida como 1rem ou 16px. | 
| ml-4 | A margem esquerda é definida como 1rem ou 16px. | 
| m-5 | A margem em todos os lados é definida como 1,25 rem ou 20px. | 
| mx-5 | A margem horizontal é definida como 1,25 rem ou 20px. | 
| meu-5 | A margem vertical é definida como 1,25 rem ou 20px. | 
| mt-5 | A margem superior é definida como 1,25 rem ou 20px. | 
| senhor-5 | A margem direita é definida como 1,25 rem ou 20px. | 
| mb-5 | A margem inferior é definida como 1,25 rem ou 20px. | 
| ml-5 | A margem esquerda é definida como 1,25 rem ou 20px. | 
| m-6 | A margem em todos os lados é igual a 1,5 rem ou 24px. | 
| mx-6 | A margem horizontal é igual a 1,5rem ou 24px. | 
| meu-6 | A margem vertical é igual a 1,5rem ou 24px. | 
| mt-6 | A margem superior é igual a 1,5 rem ou 24px. | 
| senhor-6 | A margem direita é igual a 1,5rem ou 24px. | 
| mb-6 | A margem inferior é igual a 1,5 rem ou 24px. | 
| ml-6 | A margem esquerda é igual a 1,5rem ou 24px. | 
| m-7 | A margem em todos os lados é especificada como 1,75 rem ou 28px. | 
| mx-7 | A margem ao longo do eixo x é especificada como 1,75 rem ou 28px. | 
| meu-7 | A margem ao longo do eixo y é especificada como 1,75 rem ou 28px. | 
| mt-7 | A margem superior é especificada como 1,75 rem ou 28px. | 
| senhor-7 | A margem à direita é especificada como 1,75 rem ou 28px. | 
| mb-7 | A margem inferior é especificada como 1,75 rem ou 28px. | 
| ml-7 | A margem à esquerda é especificada como 1,75 rem ou 28px. | 
| m-8 | A margem em todos os lados é definida como 2rem ou 32px. | 
| mx-8 | A margem ao longo do eixo x é definida como 2rem ou 32px. | 
| meu-8 | A margem ao longo do eixo y é definida como 2rem ou 32px. | 
| mt-8 | A margem superior é definida como 2rem ou 32px. | 
| senhor-8 | A margem à direita é definida como 2rem ou 32px. | 
| mb-8 | A margem na parte inferior é definida como 2rem ou 32px. | 
| ml-8 | A margem à esquerda é definida como 2rem ou 32px. | 
| m-9 | Há uma margem de 2,25 rem ou 36px em todos os lados. | 
| mx-9 | Há uma margem de 2,25 rem ou 36px ao longo do eixo x. | 
| meu-9 | Há uma margem de 2,25 rem ou 36px ao longo do eixo y. | 
| mt-9 | Há uma margem de 2,25 rem ou 36px na parte superior. | 
| senhor-9 | Há uma margem de 2,25 rem ou 36px no lado direito. | 
| mb-9 | Há uma margem de 2,25 rem ou 36px na parte inferior. | 
| ml-9 | Há uma margem de 2,25 rem ou 36px no lado esquerdo. | 
| m-10 | A margem em todos os lados é igual a 2,5 rem ou 40px. | 
| mx-10 | A margem ao longo do eixo x é igual a 2,5 rem ou 40px. | 
| meu-10 | A margem ao longo do eixo y é igual a 2,5 rem ou 40px. | 
| mt-10 | A margem na parte superior é igual a 2,5 rem ou 40px. | 
| senhor-10 | A margem à direita é igual a 2,5rem ou 40px. | 
| mb-10 | A margem na parte inferior é igual a 2,5 rem ou 40px. | 
| ml-10 | A margem à esquerda é igual a 2,5 rem ou 40px. | 
| m-11 | A margem em todos os lados é especificada como 2,75 rem ou 44px. | 
| mx-11 | A margem horizontal é especificada como 2,75 rem ou 44px. | 
| meu-11 | A margem vertical é especificada como 2,75 rem ou 44px. | 
| mt-11 | A margem superior é especificada como 2,75 rem ou 44px. | 
| senhor-11 | A margem direita é especificada como 2,75 rem ou 44px. | 
| mb-11 | A margem inferior é especificada como 2,75 rem ou 44px. | 
| ml-11 | A margem esquerda é especificada como 2,75 rem ou 44px. | 
| m-12 | A margem em todos os lados é definida como 3rem ou 48px. | 
| mx-12 | A margem ao longo do eixo x é definida como 3rem ou 48px. | 
| meu-12 | A margem ao longo do eixo y é definida como 3rem ou 48px. | 
| mt-12 | A margem na parte superior é definida como 3rem ou 48px. | 
| senhor-12 | A margem à direita é definida como 3rem ou 48px. | 
| mb-12 | A margem na parte inferior é definida como 3rem ou 48px. | 
| ml-12 | A margem à esquerda é definida como 3rem ou 48px. | 
| m-14 | Esta classe aplica uma margem de 3,5 rem ou 56px em todos os lados. | 
| mx-14 | Esta classe aplica uma margem de 3,5 rem ou 56px ao longo do eixo x. | 
| meus-14 | Esta classe aplica uma margem de 3,5 rem ou 56px ao longo do eixo y. | 
| mt-14 | Esta classe aplica uma margem de 3,5 rem ou 56px na parte superior. | 
| senhor-14 | Esta classe aplica uma margem de 3,5rem ou 56px à direita. | 
| mb-14 | Esta classe aplica uma margem de 3,5 rem ou 56px na parte inferior. | 
| ml-14 | Esta classe aplica uma margem de 3,5rem ou 56px à esquerda. | 
| m-16 | Uma margem de 4rem ou 64px é aplicada em todos os lados. | 
| mx-16 | Uma margem de 4rem ou 64px é aplicada ao longo do eixo x. | 
| meus-16 | Uma margem de 4rem ou 64px é aplicada ao longo do eixo y. | 
| mt-16 | Uma margem de 4rem ou 64px é aplicada na parte superior. | 
| senhor-16 | Uma margem de 4rem ou 64px é aplicada à direita. | 
| mb-16 | Uma margem de 4rem ou 64px é aplicada na parte inferior. | 
| ml-16 | Uma margem de 4rem ou 64px é aplicada à esquerda. | 
| m-20 | Usado para aplicar uma margem de 5rem ou 80px em todos os lados. | 
| mx-20 | Usado para aplicar uma margem de 5rem ou 80px ao longo do eixo x. | 
| meus-20 | Usado para aplicar uma margem de 5rem ou 80px ao longo do eixo y. | 
| mt-20 | Usado para aplicar uma margem de 5rem ou 80px na parte superior. | 
| mr-20 | Usado para aplicar uma margem de 5rem ou 80px à direita. | 
| mb-20 | Usado para aplicar uma margem de 5rem ou 80px na parte inferior. | 
| ml-20 | Usado para aplicar uma margem de 5rem ou 80px à esquerda. | 
| m-24 | Esta classe é usada para adicionar uma margem de 6rem ou 96px para todos os lados. | 
| mx-24 | Esta classe é usada para adicionar uma margem de 6rem ou 96px ao longo do eixo x. | 
| meus-24 | Esta classe é usada para adicionar uma margem de 6rem ou 96px ao longo do eixo y. | 
| mt-24 | Esta classe é usada para adicionar uma margem de 6rem ou 96px ao topo. | 
| senhor-24 | Esta classe é usada para adicionar uma margem de 6rem ou 96px à direita. | 
| mb-24 | Esta classe é usada para adicionar uma margem de 6rem ou 96px ao fundo. | 
| ml-24 | Esta classe é usada para adicionar uma margem de 6rem ou 96px à esquerda. | 
| m-28 | Adiciona uma margem de 7rem ou 112px em todos os lados. | 
| mx-28 | Adiciona uma margem de 7rem ou 112px ao longo do eixo x. | 
| meu-28 | Adiciona uma margem de 7rem ou 112px ao longo do eixo y. | 
| mt-28 | Adiciona uma margem de 7rem ou 112px na parte superior. | 
| senhor-28 | Adiciona uma margem de 7rem ou 112px à direita. | 
| mb-28 | Adiciona uma margem de 7rem ou 112px na parte inferior. | 
| ml-28 | Adiciona uma margem de 7rem ou 112px à esquerda. | 
| m-32 | Esta classe aplica uma margem de 8rem ou 128px em todos os lados. | 
| mx-32 | Esta classe aplica uma margem de 8rem ou 128px ao longo do eixo x. | 
| meu-32 | Esta classe aplica uma margem de 8rem ou 128px ao longo do eixo y. | 
| mt-32 | Esta classe aplica uma margem de 8rem ou 128px na parte superior. | 
| senhor-32 | Esta classe aplica uma margem de 8rem ou 128px à direita. | 
| mb-32 | Esta classe aplica uma margem de 8rem ou 128px na parte inferior. | 
| ml-32 | Esta classe aplica uma margem de 8rem ou 128px à esquerda. | 
| m-36 | Uma margem de 9rem ou 144px é aplicada em todos os lados. | 
| mx-36 | Uma margem de 9rem ou 144px é aplicada em todos os lados. | 
| meu-36 | Uma margem de 9rem ou 144px é aplicada em todos os lados. | 
| mt-36 | Uma margem de 9rem ou 144px é aplicada em todos os lados. | 
| mr-36 | Uma margem de 9rem ou 144px é aplicada em todos os lados. | 
| mb-36 | Uma margem de 9rem ou 144px é aplicada em todos os lados. | 
| ml-36 | Uma margem de 9rem ou 144px é aplicada em todos os lados. | 
| m-40 | Usado para aplicar uma margem de 10rem ou 160px em todos os lados. | 
| mx-40 | Usado para aplicar uma margem de 10rem ou 160px em todos os lados. | 
| meu-40 | Usado para aplicar uma margem de 10rem ou 160px em todos os lados. | 
| mt-40 | Usado para aplicar uma margem de 10rem ou 160px em todos os lados. | 
| mr-40 | Usado para aplicar uma margem de 10rem ou 160px em todos os lados. | 
| mb-40 | Usado para aplicar uma margem de 10rem ou 160px em todos os lados. | 
| ml-40 | Usado para aplicar uma margem de 10rem ou 160px em todos os lados. | 
| m-44 | Usando esta classe, a margem em todos os lados é definida como 11rem ou 176px. | 
| mx-44 | Usando esta classe, a margem horizontal é definida como 11rem ou 176px. | 
| meu-44 | Usando esta classe, a margem vertical é definida como 11rem ou 176px. | 
| mt-44 | Usando esta classe, a margem no topo é definida como 11rem ou 176px. | 
| senhor-44 | Usando esta classe, a margem à direita é definida como 11rem ou 176px. | 
| mb-44 | Usando esta classe, a margem na parte inferior é definida como 11rem ou 176px. | 
| ml-44 | Usando esta classe, a margem à esquerda é definida como 11rem ou 176px. | 
| m-48 | A margem em todos os lados é definida como 12rem ou 192px. | 
| mx-48 | A margem ao longo do eixo x é definida como 12rem ou 192px. | 
| meu-48 | A margem ao longo do eixo y é definida como 12rem ou 192px. | 
| mt-48 | A margem na parte superior é definida como 12rem ou 192px. | 
| senhor-48 | A margem à direita é definida como 12rem ou 192px. | 
| mb-48 | A margem na parte inferior é definida como 12rem ou 192px. | 
| ml-48 | A margem à esquerda é definida como 12rem ou 192px. | 
| m-52 | A margem em todos os lados é especificada como 13 rem ou 208 px. | 
| mx-52 | A margem ao longo do eixo x é especificada como 13rem ou 208px. | 
| meu-52 | A margem ao longo do eixo y é especificada como 13rem ou 208px. | 
| mt-52 | A margem na parte superior é especificada como 13rem ou 208px. | 
| senhor-52 | A margem à direita é especificada como 13rem ou 208px. | 
| mb-52 | A margem na parte inferior é especificada como 13rem ou 208px. | 
| ml-52 | A margem à esquerda é especificada como 13rem ou 208px. | 
| m-56 | A margem em todos os lados é definida como 14rem ou 224px. | 
| mx-56 | A margem horizontal é definida como 14 rem ou 224 px. | 
| meu-56 | A margem vertical é definida como 14rem ou 224px. | 
| mt-56 | A margem superior é definida como 14rem ou 224px. | 
| senhor-56 | A margem direita é definida como 14rem ou 224px. | 
| mb-56 | A margem inferior é definida como 14rem ou 224px. | 
| ml-56 | A margem esquerda é definida como 14rem ou 224px. | 
| m-60 | A margem em todos os lados é igual a 15rem ou 240px. | 
| mx-60 | A margem em todos os lados é igual a 15rem ou 240px. | 
| meu-60 | A margem em todos os lados é igual a 15rem ou 240px. | 
| mt-60 | A margem em todos os lados é igual a 15rem ou 240px. | 
| mr-60 | A margem em todos os lados é igual a 15rem ou 240px. | 
| mb-60 | A margem em todos os lados é igual a 15rem ou 240px. | 
| ml-60 | A margem em todos os lados é igual a 15rem ou 240px. | 
| m-64 | Usado para aplicar uma margem de 16rem ou 256px em todos os lados. | 
| mx-64 | Usado para aplicar uma margem de 16 rem ou 256 px ao longo do eixo x. | 
| meu-64 | Usado para aplicar uma margem de 16 rem ou 256 px ao longo do eixo y. | 
| mt-64 | Usado para aplicar uma margem de 16rem ou 256px na parte superior. | 
| senhor-64 | Usado para aplicar uma margem de 16rem ou 256px à direita. | 
| mb-64 | Usado para aplicar uma margem de 16rem ou 256px na parte inferior. | 
| ml-64 | Usado para aplicar uma margem de 16rem ou 256px à esquerda. | 
| m-72 | Esta classe aplica uma margem de 18rem ou 288px em todos os lados. | 
| mx-72 | Esta classe aplica uma margem de 18rem ou 288px horizontalmente. | 
| meu-72 | Esta classe aplica uma margem de 18rem ou 288px verticalmente. | 
| mt-72 | Esta classe aplica uma margem de 18rem ou 288px na parte superior. | 
| senhor-72 | Esta classe aplica uma margem de 18rem ou 288px à direita. | 
| mb-72 | Esta classe aplica uma margem de 18rem ou 288px na parte inferior. | 
| ml-72 | Esta classe aplica uma margem de 18rem ou 288px à esquerda. | 
| m-80 | Uma margem de 20rem ou 320px é aplicada em todos os lados. | 
| mx-80 | Uma margem de 20rem ou 320px é aplicada ao longo do eixo x. | 
| meu-80 | Uma margem de 20rem ou 320px é aplicada ao longo do eixo y . | 
| mt-80 | Uma margem de 20rem ou 320px é aplicada na parte superior. | 
| mr-80 | Uma margem de 20rem ou 320px é aplicada à direita. | 
| mb-80 | Uma margem de 20rem ou 320px é aplicada na parte inferior. | 
| ml-80 | Uma margem de 20rem ou 320px é aplicada à esquerda. | 
| m-96 | Adiciona uma margem de 24rem ou 384px em todos os lados. | 
| mx-96 | Adiciona uma margem de 24 rem ou 384 px ao longo do eixo x. | 
| meu-96 | Adiciona uma margem de 24 rem ou 384 px ao longo do eixo y. | 
| mt-96 | Adiciona uma margem de 24rem ou 384px na parte superior. | 
| senhor-96 | Adiciona uma margem de 24rem ou 384px à direita. | 
| mb-96 | Adiciona uma margem de 24rem ou 384px na parte inferior. | 
| ml-96 | Adiciona uma margem de 24rem ou 384px à esquerda. | 
| m-auto | A margem em todos os lados é definida como automática. | 
| mx-auto | A margem ao longo do eixo x é definida como automática. | 
| meu-auto | A margem ao longo do eixo y é definida como automática. | 
| mt-auto | A margem na parte superior é definida como automática. | 
| mr-auto | A margem à direita é definida como automática. | 
| mb-auto | A margem na parte inferior é definida como automática. | 
| ml-auto | A margem à esquerda é definida como automática. | 
Sintaxe
<element class="m-0">...</element>
A margem Tailwind é simples e direta.
Para adicionar uma margem a um elemento, simplesmente adicione a classe tailwind margin à tag HTML do elemento .
O exemplo abaixo demonstra algumas classes de margem do Tailwind explicadas acima:
Tailwind Margin Example: 1
Tailwind Margin Example: 2
Tailwind Margin Example: 3
Conclusão
A margem Tailwind é um recurso poderoso e flexível que permite adicionar espaço de forma rápida e fácil ao redor dos elementos .
Esteja você criando um site simples ou um aplicativo da Web complexo, a margem do Tailwind pode ajudá-lo a criar layouts e designs eficazes.
