Este blog fornecerá uma ideia de como atribuir espaço igual entre vários elementos no Tailwind.
Como atribuir espaço igual entre vários elementos no Tailwind?
Os usuários podem atribuir espaços iguais entre os elementos usando o “ espaço-{x/y}-{tamanho} ”classe de utilidade. Os usuários podem adicionar espaço no eixo x ou y especificando um valor inteiro. O utilitário de espaçamento é necessário porque torna a página da web atraente. Se uma página web não tiver espaçamento adequado entre os elementos, ela não atrairá usuários.
Vamos dar um exemplo de código para atribuir espaço igual entre os elementos da grade.
Método 1: Atribuição de espaço no eixo X.
Espaço igual atribuído no eixo x cria espaçamento igual à direita e à esquerda do elemento. Para atribuir o espaço no eixo x use a seguinte sintaxe:
espaço - x - { tamanho }
O tamanho pode ser qualquer valor inteiro.
Considere o código abaixo para atribuir espaço igual no eixo x:
< corpo >< divisão aula = 'mx-4 grade grid-cols-4 espaço-x-4' >
< divisão aula = 'bg-verde-400 h-16 arredondado-lg border-2 border-green-800' > 1 divisão >
< divisão aula = 'bg-verde-400 h-16 arredondado-lg border-2 border-green-800' > 2 divisão >
< divisão aula = 'bg-verde-400 h-16 arredondado-lg border-2 border-green-800' > 3 divisão >
< divisão aula = 'bg-verde-400 h-16 arredondado-lg border-2 border-green-800' > 4 divisão >
divisão >
corpo >
Neste código:
- “ mx-4 ”adiciona uma margem de 4 px no eixo x (direita e esquerda).
- O ' grade ”classe cria uma grade.
- O ' grade-cols-4 ”faça 4 colunas na grade.
- O ' espaço-x-4 ”adiciona um espaço de 4px entre os elementos da grade.
- “ bg-verde-400 ”define a cor de fundo para verde.
- “ h-16 ”define a altura para 16px.
- O ' arredondado-lg ”torna o canto arredondado e o raio da borda é grande.
- O ' fronteira-2 ”faz uma borda de 2px ao redor do elemento.
- “ borda-verde-800 ”torna a borda verde escura.
Saída
Visualize a saída criada pelo código acima:
Pode-se observar que um espaçamento de 4px é atribuído entre os elementos.
Método 2: Atribuição de espaço no eixo y.
O espaçamento pode ser atribuído no eixo y semelhante ao método acima, por meio de pequenas alterações no código acima. Atribui espaços ao longo do eixo y (superior e inferior). A sintaxe para isso é:
O código abaixo pode ser implementado para adicionar espaços ao longo do eixo y:
< corpo >< divisão aula = 'mx-4 meu-4 espaço-y-4' >
< divisão aula = 'bg-verde-400 h-16 arredondado-lg border-2 border-green-800' > 1 divisão >
< divisão aula = 'bg-verde-400 h-16 arredondado-lg border-2 border-green-800' > 2 divisão >
< divisão aula = 'bg-verde-400 h-16 arredondado-lg border-2 border-green-800' > 3 divisão >
< divisão aula = 'bg-verde-400 h-16 arredondado-lg border-2 border-green-800' > 4 divisão >
divisão >
corpo >
Neste código:
- “ mx-4 ”adiciona uma margem de 4px à esquerda e à direita dos elementos para tornar a saída mais otimizada.
- “ meu-4 ”adiciona uma margem de 4px no eixo y (superior e inferior).
- “ espaço-y-4 ”adiciona espaço de 4px no eixo y (superior e inferior).
Saída
Salve o código acima e visualize a página criada por ele para ver o espaçamento como:
Trata-se de atribuir espaço igual entre os elementos.
Conclusão
Para atribuir espaço igual entre vários elementos no Tailwind, os usuários podem usar o “ espaço-{x/y}-{tamanho} ”classe de utilitário e especifique um valor inteiro como tamanho de acordo com o requisito. O espaçamento igual entre os elementos torna a saída mais escalonável e os visualizadores permanecem envolvidos com a página da web. Esta postagem forneceu o método para atribuir espaço igual entre vários elementos no Tailwind.