espaço horizontal é um espaço ao longo do eixo x entre os elementos filho de um flex ou contêiner de grade quando eles são organizados em uma linha. espaço vertical é um espaço ao longo do eixo y entre os elementos filho de um flex ou contêiner de grade quando eles são organizados em uma coluna.
Este artigo demonstrará:
- Como adicionar espaço horizontal entre elementos no Tailwind?
- Como adicionar espaço vertical entre elementos no Tailwind?
Como adicionar espaço horizontal entre elementos no Tailwind?
Para adicionar espaço horizontal entre os elementos no Tailwind, o “ espaço-x-
Sintaxe
Aqui, “x” representa o “eixo x” ou “espaço horizontal”. Certifique-se de substituir “
Exemplo: aplicando espaço horizontal entre elementos no Tailwind
Neste exemplo, temos um contêiner flexível com alguns elementos filhos. Usaremos o “ espaço-x-8 ” classe utilitária com o “ Aqui, no elemento Nos elementos filhos Saída A saída acima indica que o espaço horizontal entre o elemento flex foi aplicado com sucesso. Para adicionar espaço vertical entre os elementos no Tailwind, o “ espaço-y- Sintaxe Aqui, “y” representa o “eixo y” ou “espaço vertical”. Certifique-se de substituir “ Exemplo: aplicando espaço vertical entre elementos no Tailwind Neste exemplo, temos um contêiner flexível com alguns elementos filhos em uma coluna. Usaremos o “ espaço-y-5 ” classe utilitária com o “ Aqui: Saída O espaço vertical entre os elementos flexíveis foi aplicado de forma eficiente. Para adicionar o espaço horizontal e vertical entre os elementos no Tailwind, o “ espaço-x-
< corpo >
< div aula = 'flex space-x-8 m-10 h-20 w-max' >
< div aula = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div aula = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div aula = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div aula = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div aula = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div aula = 'bg-teal-500 w-20 p-5' > 6 < / div >
< / div >
< / corpo >
Como adicionar espaço vertical entre elementos no Tailwind?
< div aula = 'flex flex-col space-y-5 m-10 text-center' >
< div aula = 'bg-teal-500 p-5' > 1 < / div >
< div aula = 'bg-teal-500 p-5' > 2 < / div >
< div aula = 'bg-teal-500 p-5' > 3 < / div >
< div aula = 'bg-teal-500 p-5' > 4 < / div >
< / div >
< / corpo >
Conclusão