Espace horizontal est un espace le long de l'axe x entre les éléments enfants d'un conteneur flex ou grid lorsqu'ils sont disposés en ligne. Espace vertical est un espace le long de l'axe y entre les éléments enfants d'un conteneur flex ou grid lorsqu'ils sont disposés dans une colonne.
Cet article démontrera :
- Comment ajouter un espace horizontal entre les éléments dans Tailwind ?
- Comment ajouter un espace vertical entre les éléments dans Tailwind ?
Comment ajouter un espace horizontal entre les éléments dans Tailwind ?
Pour ajouter un espace horizontal entre les éléments dans Tailwind, le ' espace-x-
Syntaxe
<élément classe = 'espace-x-
Ici, 'x' représente 'l'axe des x' ou 'l'espace horizontal'. Assurez-vous de remplacer «
Exemple : Application d'un espace horizontal entre les éléments dans Tailwind
Dans cet exemple, nous avons un conteneur flexible avec des éléments enfants. Nous utiliserons le ' espace-x-8 ' classe utilitaire avec le ' Ici, dans l'élément parent Dans les éléments enfants Sortir La sortie ci-dessus indique que l'espace horizontal entre l'élément flexible a été appliqué avec succès. Pour ajouter un espace vertical entre les éléments dans Tailwind, le ' espace-y- Syntaxe Ici, 'y' représente 'l'axe y' ou 'l'espace vertical'. Assurez-vous de remplacer « Exemple : Application d'un espace vertical entre les éléments dans Tailwind Dans cet exemple, nous avons un conteneur flexible avec des éléments enfants dans une colonne. Nous utiliserons le ' space-y-5 ' classe utilitaire avec le ' Ici: Sortir L'espace vertical entre les éléments flexibles a été appliqué efficacement. Pour ajouter l'espace horizontal et vertical entre les éléments dans Tailwind, le ' espace-x-
< corps >
< div classe = 'espace flex-x-8m-10h-20w-max' >
< div classe = 'bg-sarcelle-500 w-20 p-5' > 1 < / div >
< div classe = 'bg-sarcelle-500 w-20 p-5' > 2 < / div >
< div classe = 'bg-sarcelle-500 w-20 p-5' > 3 < / div >
< div classe = 'bg-sarcelle-500 w-20 p-5' > 4 < / div >
< div classe = 'bg-sarcelle-500 w-20 p-5' > 5 < / div >
< div classe = 'bg-sarcelle-500 w-20 p-5' > 6 < / div >
< / div >
< / corps >
Comment ajouter un espace vertical entre les éléments dans Tailwind ?
< div classe = 'flex flex-col espace-y-5 m-10 texte-centre' >
< div classe = 'bg-sarcelle-500 p-5' > 1 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 2 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 3 < / div >
< div classe = 'bg-sarcelle-500 p-5' > 4 < / div >
< / div >
< / corps >
Conclusion