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 .

Classes de margem de vento de cauda

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>
Nota : Pode-se usar um valor de margem negativa prefixando o nome da classe com um traço, como -mt-8.

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 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold mt-4">Margin Class in Tailwind CSS</p>
<div class="my-2 bg-gray-200 flex font-medium rounded">
<div class="m-4 border-2
bg-gray-400 w-16 h-16">
m-4
</div>
<div class="m-8 border-2
bg-gray-400 w-16 h-16">
m-6
</div>
<div class="m-12 border-2
bg-gray-400 w-16 h-16">
m-10
</div>
<div class="m-16 border-2
bg-gray-400 w-16 h-16">
m-12
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
No exemplo abaixo, ilustramos o funcionamento de mais classes de margem Tailwind:

Tailwind Margin Example: 2 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold mt-4">Margin Class in Tailwind CSS</p>
<div class="my-2 bg-gray-200 font-medium rounded p-2 w-1/2 mx-auto">
<div class="m-0 border-2
bg-gray-400 w-16 h-16">
m-0
</div>
<div class="mt-8 border-2
bg-gray-400 w-16 h-16">
mt-8
</div>
<div class="ml-10 border-2
bg-gray-400 w-16 h-16">
ml-10
</div>
<div class="my-4 border-2
bg-gray-400 w-16 h-16">
my-4
</div>
<div class="mx-6 border-2
bg-gray-400 w-16 h-16">
mx-6
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
Para este exemplo, vamos considerar o uso de algumas classes adicionais de propriedades de margem tailwind:

Tailwind Margin Example: 3 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-semibold mt-4">Margin Class in Tailwind CSS</p>
<div class="my-2 bg-gray-200 flex flex-col items-end font-medium rounded p-2 w-1/2 mx-auto">
<div class="mx-auto border-2
bg-gray-400 w-16 h-16">
mx-auto
</div>
<div class="mr-8 border-2
bg-gray-400 w-16 h-16">
mr-8
</div>
<div class="m-5 border-2
bg-gray-400 w-16 h-16">
m-5
</div>
<div class="mx-2 border-2
bg-gray-400 w-16 h-16">
mx-2
</div>
<div class="mb-10 border-2
bg-gray-400 w-16 h-16">
mb-10
</div>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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.

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone