No Tailwind CSS, o “ espaço entre ”Utilitários são usados para controlar o espaço entre elementos filhos de contêineres flex ou grid. Ele oferece várias classes, como “space-x-
Este guia exemplificará o método de uso de um valor de espaço negativo no Tailwind.
Como usar um valor de espaço negativo no Tailwind?
Para usar um valor de espaço negativo no Tailwind, primeiro crie uma estrutura HTML. Em seguida, use o travessão “ – ”Com o “espaço entre” classes de utilitário desejado para convertê-lo em um valor negativo. O ' -espaço-x-
Vejamos os exemplos abaixo para entendê-lo melhor.
Exemplo 1: Aplicar um espaçamento horizontal negativo entre elementos
Neste exemplo, temos um flex container com alguns elementos filhos seguidos. Usaremos o “ -espaço-x-8 ”classe para aplicar o espaçamento horizontal negativo entre elementos flexíveis:
< corpo >< divisão aula = 'flex -espaço-x-8 m-10 h-20 w-máx' >
< divisão aula = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 divisão >
< divisão aula = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 divisão >
< divisão aula = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 divisão >
< divisão aula = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 divisão >
< divisão aula = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 divisão >
< divisão aula = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 divisão >
divisão >
corpo >
Aqui, no elemento parent
-
- “ flexionar ”A classe cria um layout flexível.
- “ -espaço-x-8 ”A classe adiciona 8 unidades de espaçamento horizontal negativo entre elementos flexíveis em um contêiner.
- “ m-10 ”A classe adiciona uma margem de 10 unidades em todos os lados do contêiner.
- “ h-20 ”A classe define a altura do contêiner em 20 unidades.
- “ w-máx. ”A classe define a largura do contêiner para a largura máxima do conteúdo.
Nos elementos filhos
-
- “ bg-teal-500 ”A classe define o plano de fundo dos elementos flexíveis como azul-petróleo.
- “ w-20 ”A classe define a largura de cada item flexível para 20 unidades.
- “ página 5 ”A classe adiciona 5 unidades de preenchimento a todos os lados de cada item flexível.
- “ fronteira-2 ”A classe define a largura da borda do contêiner para 2 unidades.
- “ border-teal-800 ”A classe aplica a cor azul-petróleo à borda.
Saída
A saída acima mostra que os elementos flexíveis estão sobrepostos. Isso indica que o valor do espaço horizontal negativo foi aplicado com sucesso.
Exemplo 2: Aplicar um espaçamento vertical negativo entre elementos
Neste exemplo, temos um flex container com alguns elementos filhos em uma coluna. Usaremos o “ -espaço-y-7 ”classe para aplicar o espaçamento vertical negativo entre os elementos flexíveis:
< corpo >< divisão aula = 'flex flex-col -space-y-7 m-10 text-center' >
< divisão aula = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 divisão >
< divisão aula = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 divisão >
< divisão aula = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 divisão >
< divisão aula = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 divisão >
divisão >
corpo >
Aqui:
-
- “ flexionar ”A classe cria um layout flexível.
- “ coluna flexível ”A classe alinha os itens flexíveis na direção vertical.
- “ -espaço-y-5 ”A classe adiciona 7 unidades de espaçamento vertical negativo entre elementos flexíveis em um contêiner.
- “ m-10 ”A classe adiciona uma margem de 10 unidades em todos os lados do contêiner.
- “ centro de texto ”classe alinha o texto do contêiner ao centro.
Saída
Pode-se observar que os elementos flexíveis estão sobrepostos. Isso indica que o valor negativo do espaço vertical foi aplicado com sucesso.
Conclusão
Para usar um valor de espaço negativo no Tailwind, use o “ -espaço-x-