Espaço de vento de cauda entre
Tailwind Space Between é uma propriedade poderosa que permite que você e outros designers adicionem facilmente espaçamento igual entre vários elementos sem a necessidade de CSS personalizado.
Neste artigo, exploraremos o que é o Tailwind Space Between , como ele funciona e como você pode usá-lo em seus sites.
Índice-
O que é Tailwind Space Between?
Tailwind Space Between adiciona espaçamento igual entre vários elementos. Esse espaçamento pode ser adicionado horizontal ou verticalmente, dependendo da direção especificada.
Ele é integrado à estrutura CSS do Tailwind, facilitando o uso e a personalização.
Ele nos permite espaçar uniformemente os elementos filho dentro de um contêiner, seja um contêiner flex , grid ou div regular .
Essa propriedade é usada para criar um espaçamento consistente e uniforme entre os elementos filho, resultando em um layout mais compacto, esteticamente agradável e mais fácil de ler.
Ao aplicar o espaço entre , podemos garantir que os elementos sejam colocados de maneira uniforme, tornando o design mais coeso e visualmente atraente.
Espaço de vento entre as classes
Os espaços entre as classes presentes no Tailwind estão listados abaixo:
| Aulas | Visão geral |
| espaço-x-0 | Usado para definir a propriedade de margem esquerda de cada elemento filho como zero. |
| espaço-y-0 | A propriedade margin top dos elementos filho é definida como zero. |
| espaço-x-0,5 | A propriedade margin left de cada elemento filho é definida como 0,125 rem ou 2px. |
| espaço-y-0.5 | A propriedade margin top de cada elemento filho é definida como 0,125rem ou 2px. |
| espaço-x-1 | Esta classe é usada para especificar a propriedade margin left de elementos filho dentro de um container para 0.25rem ou 4px. |
| espaço-y-1 | Usando esta classe, a propriedade margin top de cada filho dentro de um contêiner é definida como 0,25 rem ou 4px. |
| espaço-x-1.5 | Nesse caso, a propriedade margin left é especificada como 0,375rem ou 6px para todos os elementos filhos. |
| espaço-y-1.5 | Usando esta classe, podemos definir a propriedade margin top para todos os elementos filho como 0,375rem ou 6px. |
| espaço-x-2 | A margem esquerda de 0,5 rem ou 8px é aplicada a todos os elementos filhos. |
| espaço-y-2 | A margem superior de 0,5 rem ou 8 px é aplicada a todos os elementos filho. |
| espaço-x-2.5 | A propriedade margin left para cada elemento filho é definida como 0,625rem ou 10px. |
| espaço-y-2.5 | Usando esta classe, a propriedade margin top para todos os elementos filho é definida como 0,625rem ou 10px. |
| espaço-x-3 | Nesse caso, a propriedade margin left para todos os elementos filhos é especificada como 0,75 rem ou 12px. |
| espaço-y-3 | Aplica uma margem superior de 0,75 rem ou 12px a cada elemento filho. |
| espaço-x-3.5 | Esta classe é usada para definir a margem esquerda de cada elemento filho dentro de um contêiner para 0,875 rem ou 14px. |
| espaço-y-3.5 | Essa classe ajuda a definir a propriedade margin top de cada elemento filho dentro de um contêiner para 0,875 rem ou 14px. |
| espaço-x-4 | A margem esquerda de cada elemento filho é definida como 1rem ou 16px. |
| espaço-y-4 | O topo da margem para todos os elementos filho é especificado como 1rem ou 16px. |
| espaço-x-5 | Usado para definir a propriedade margin left de cada elemento filho dentro de um contêiner para 1,25 rem ou 20px. |
| espaço-y-5 | Nesse caso, o topo da margem para cada elemento filho é definido como 1,25 rem ou 20px. |
| espaço-x-6 | Usando esta classe, podemos definir a margem esquerda de cada elemento filho para 1,5 rem ou 24px. |
| espaço-y-6 | Essa classe garante que o topo da margem de cada elemento filho seja definido como 1,5 rem ou 24px. |
| espaço-x-7 | O objetivo desta classe é definir a margem esquerda de cada elemento filho dentro de um contêiner para um valor de 1,75 rem ou 28px. |
| espaço-y-7 | Um valor de 1,75 rem ou 28px é definido para a margem superior de cada elemento filho. |
| espaço-x-8 | Esta classe define a margem esquerda de cada elemento filho dentro de um contêiner para 2rem ou 32px. |
| espaço-y-8 | Cada elemento filho dentro de um container tem uma margem superior de 2rem ou 32px. |
| espaço-x-9 | Ele define a margem esquerda de cada elemento filho dentro de um contêiner para 2,25 rem ou 36px. |
| espaço-y-9 | Os elementos filho dentro de um contêiner têm uma margem superior de 2,25 rem ou 36px com esta classe. |
| espaço-x-10 | Cada elemento filho em um contêiner terá uma margem esquerda de 2,5 rem ou 40px ao usar esta classe. |
| espaço-y-10 | Usando esta classe, você pode definir a margem superior de cada elemento filho dentro de um contêiner para 2,5 rem ou 40px. |
| espaço-x-11 | Esta classe é usada para definir a margem esquerda de todos os elementos filho como 2,75 rem ou 44px. |
| espaço-y-11 | Nesse caso, a propriedade margin top de todos os elementos filhos é especificada como 2,75 rem ou 44px. |
| espaço-x-12 | A propriedade margin left de todos os elementos filho é definida como 3 rem ou 48px. |
| espaço-y-12 | Usando esta classe, a propriedade margin top de cada elemento filho é definida como 3rem ou 48px. |
| espaço-x-14 | Usando esta classe, podemos definir a margem esquerda de cada elemento filho como 3,5 rem ou 56px. |
| espaço-y-14 | Essa classe é usada para aplicar uma propriedade margin top de 3,5 rem ou 56px a todos os elementos filho dentro de um contêiner. |
| espaço-x-16 | Aplica uma margem esquerda de 4rem ou 64px a todos os elementos filho presentes em um contêiner. |
| espaço-y-16 | O topo da margem de todos os elementos filho é definido como 4rem ou 64px. |
| espaço-x-20 | Todos os elementos filho em um contêiner recebem uma margem esquerda de 5rem ou 80px. |
| espaço-y-20 | A margem superior de 5rem ou 80px é aplicada a todos os elementos filho. |
| espaço-x-24 | Cada elemento filho em um contêiner recebe uma margem esquerda de 6rem ou 96px. |
| espaço-y-24 | Os elementos filho do contêiner têm uma margem superior de 4 rem ou 64 px quando essa classe é usada. |
| espaço-x-28 | Todos os elementos filho dentro de um contêiner recebem uma margem esquerda de 7rem ou 112px. |
| espaço-y-28 | Garante que todos os elementos filho em um contêiner tenham uma margem superior de 7rem ou 112px. |
| espaço-x-32 | Cada elemento filho em um contêiner é circundado por uma margem esquerda de 8 rem ou 128 px. |
| espaço-y-32 | O topo da margem de cada elemento filho em um contêiner é 8rem ou 128px. |
| espaço-x-36 | Essa classe garante que a margem esquerda de cada elemento filho seja definida como 9rem ou 144px. |
| espaço-y-36 | Esta classe é usada para definir o topo da margem de cada elemento filho para 9rem ou 144px. |
| espaço-x-40 | Nesse caso, a margem esquerda de todos os elementos filho é definida como 10 rem ou 160px. |
| espaço-y-40 | Usado para definir a margem superior de todos os elementos filho como 10rem ou 160px. |
| espaço-x-44 | A margem esquerda de todos os elementos filho é especificada como 11rem ou 176px. |
| espaço-y-44 | Esta classe aplica uma margem superior de 11 rem ou 176 px a todos os elementos filhos. |
| espaço-x-48 | Usando esta classe, a margem esquerda de todos os elementos filho é definida como 12rem ou 192px. |
| espaço-y-48 | Os elementos filho do contêiner têm uma margem superior de 12 rem ou 192 px quando essa classe é usada. |
| espaço-x-52 | Todos os elementos filho dentro de um contêiner recebem uma margem esquerda de 13 rem ou 208 px. |
| espaço-y-52 | Essa classe garante que o topo da margem de cada elemento filho seja definido como 13rem ou 208px. |
| espaço-x-56 | Cada elemento filho em um contêiner recebe uma margem esquerda de 14 rem ou 224 px. |
| espaço-y-56 | O objetivo desta classe é definir a margem superior de cada elemento filho dentro de um contêiner para um valor de 14rem ou 224px. |
| espaço-x-60 | Um valor de 15rem ou 240px é definido como a margem esquerda de cada elemento filho. |
| espaço-y-60 | Todos os elementos filho dentro de um contêiner recebem uma margem superior de 15rem ou 240px. |
| espaço-x-64 | Esta classe aplica uma margem esquerda de 16 rem ou 256 px a todos os elementos filho dentro de um container. |
| espaço-y-64 | Garante que todos os elementos filhos em um contêiner tenham uma margem superior de 16 rem ou 256 px. |
| espaço-x-72 | Cada elemento filho em um contêiner é circundado por uma margem esquerda de 18 rem ou 288 px. |
| espaço-y-72 | A margem superior de cada elemento filho em um contêiner é de 18 rem ou 288 px. |
| espaço-x-80 | Nesse caso, a propriedade margin left para todos os elementos filho é especificada como 20rem ou 320px. |
| espaço-y-80 | Usando esta classe, a propriedade margin top de todos os elementos filho é definida como 20rem ou 320px. |
| espaço-x-96 | Essa classe é usada para definir a propriedade margin left de todos os elementos filho dentro de um contêiner para 24 rem ou 384px. |
| espaço-y-96 | Usando esta classe, podemos definir a propriedade margin top para todos os elementos filho como 24rem ou 384px. |
| espaço-x-px | A margem esquerda de 1px é aplicada a todos os elementos filhos. |
| espaço-y-px | O topo da margem de 1px é aplicado a todos os elementos filhos. |
| espaço-x-reverso | Essa classe é usada para inverter a ordem dos elementos filho exibidos horizontalmente de um contêiner pai. |
| espaço-y-reverso | Os elementos filho exibidos verticalmente de um contêiner pai são revertidos usando essa classe. |
Sintaxe
<element class="space-y-0">...</element>
Tailwind Space Between funciona adicionando margens aos elementos entre os quais você deseja adicionar espaço.
A quantidade de espaço adicionada é determinada pelo tamanho especificado.
Este exemplo é usado para demonstrar o uso do espaço entre as classes responsáveis pelo espaçamento vertical:
Example:
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
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Space Between class in Tailwind CSS
class="flex justify-evenly"
class="w-1/4 space-y-4 font-medium"
class="my-2"space-y-4
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"1
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"2
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"3
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"4
class="w-1/4 space-y-7 font-medium"
class="my-2"space-y-7
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"1
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"2
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"3
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"4
class="w-1/4 space-y-10 font-medium"
class="my-2"space-y-10
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"1
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"2
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"3
class="bg-green-400 h-8 rounded-lg
border-2 border-green-800"4
O exemplo abaixo ilustra o espaço Tailwind entre as classes que ajuda no espaçamento horizontal entre os elementos filhos:
Example:
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
36
37
38
39
40
41
42
43
44
45
46
47
<!DOCTYPE html>
src="https://cdn.tailwindcss.com"
class="m-3 text-center"
class="text-gray-700 text-2xl font-semibold"
MrExamples
class="font-semibold my-2"Space Between class in Tailwind CSS
class="flex flex-col justify-evenly space-y-6 my-4"
class="w-full flex items-center space-x-3 font-medium"
class="my-2"space-x-3
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"1
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"2
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"3
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"4
class="w-full flex items-center space-x-6 font-medium"
class="my-2"space-x-6
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"1
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"2
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"3
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"4
class="w-full flex items-center space-x-12 font-medium"
class="my-2"space-x-12
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"1
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"2
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"3
class="bg-amber-300 w-16 rounded-lg
border-2 border-black"4
Espaço de vento favorável entre os benefícios
A incorporação do Tailwind Space Between em seus sites pode fornecer uma série de vantagens, que incluem:
- Ao adicionar espaçamento igual entre os elementos, o Tailwind Space Between pode melhorar a legibilidade do seu design. Isso pode tornar mais fácil para os usuários digitalizar e navegar em seu conteúdo, melhorando sua experiência geral.
- Tailwind Space Between permite adicionar espaçamento consistente entre os elementos, facilitando a criação de um design coeso e polido. Isso pode ajudá-lo a manter a consistência em todo o seu projeto de design.
- Ao usar o Tailwind Space Between, você pode economizar tempo e esforço ao projetar e desenvolver seu projeto. Ele elimina a necessidade de CSS personalizado, permitindo que você se concentre em outros aspectos do seu projeto de design.
- Tailwind Space Between é personalizável, permitindo que você ajuste a quantidade de espaçamento para atender às suas necessidades de design. Você também pode combiná-lo com outros utilitários Tailwind para criar designs exclusivos e personalizados.
- O Tailwind Space Between pode ser usado em uma variedade de projetos de design, incluindo web design, interfaces de usuário e design de impressão. É uma ferramenta versátil que pode ajudá-lo a criar uma ampla gama de designs de forma rápida e fácil.
Nós valorizamos o seu feedback.
+1
+1
+1
+1
+1
+1
+1
