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.