Ce blog donnera une idée de l'attribution d'un espace égal entre plusieurs éléments dans Tailwind.
Comment attribuer un espace égal entre plusieurs éléments dans Tailwind ?
Les utilisateurs peuvent attribuer des espaces égaux entre les éléments en utilisant le « espace-{x/y}-{taille} 'classe utilitaire. Les utilisateurs peuvent ajouter de l'espace sur l'axe x ou y en spécifiant une valeur entière. L'utilitaire d'espacement est nécessaire car il rend la page Web attrayante. Si une page Web n’a pas un espacement approprié entre les éléments, elle n’attirera pas les utilisateurs.
Prenons un exemple de code pour attribuer un espace égal entre les éléments de la grille.
Méthode 1 : attribution d'un espace sur l'axe X.
Un espace égal attribué sur l'axe des x crée un espacement égal à droite et à gauche de l'élément. Pour attribuer l'espace sur l'axe des x, utilisez la syntaxe suivante :
espace - X - { taille }
La taille peut être n’importe quelle valeur entière.
Considérez le code ci-dessous pour attribuer un espace égal sur l'axe des x :
< corps >< div classe = 'grille mx-4 grille-cols-4 espace-x-4' >
< div classe = 'bg-vert-400 h-16 arrondi-lg border-2 border-green-800' > 1 div >
< div classe = 'bg-vert-400 h-16 arrondi-lg border-2 border-green-800' > 2 div >
< div classe = 'bg-vert-400 h-16 arrondi-lg border-2 border-green-800' > 3 div >
< div classe = 'bg-vert-400 h-16 arrondi-lg border-2 border-green-800' > 4 div >
div >
corps >
Dans ce code :
- ' mx-4 » ajoute une marge de 4 px sur l'axe des x (droite et gauche).
- Le ' grille ' La classe crée une grille.
- Le ' grille-cols-4 » faites 4 colonnes dans la grille.
- Le ' espace-x-4 » ajoute un espace de 4px entre les éléments de la grille.
- ' bg-vert-400 ' définit la couleur d'arrière-plan sur vert.
- ' h-16 ' définit la hauteur à 16px.
- Le ' arrondi-lg ' rend le coin arrondi et le rayon de la bordure est grand.
- Le ' frontière-2 ' fait une bordure de 2 pixels autour de l'élément.
- ' bordure-vert-800 » rend la bordure vert foncé.
Sortir
Prévisualisez la sortie créée par le code ci-dessus :
On voit qu'un espacement de 4px est attribué entre les éléments.
Méthode 2 : attribution d'un espace sur l'axe y.
L'espacement peut être attribué sur l'axe y de la même manière que la méthode ci-dessus, par de petites modifications dans le code ci-dessus. Il attribue des espaces le long de l'axe y (haut et bas). La syntaxe est la suivante :
Le code ci-dessous peut être implémenté pour ajouter des espaces le long de l'axe y :
< corps >< div classe = 'mx-4 mon-4 espace-y-4' >
< div classe = 'bg-vert-400 h-16 arrondi-lg border-2 border-green-800' > 1 div >
< div classe = 'bg-vert-400 h-16 arrondi-lg border-2 border-green-800' > 2 div >
< div classe = 'bg-vert-400 h-16 arrondi-lg border-2 border-green-800' > 3 div >
< div classe = 'bg-vert-400 h-16 arrondi-lg border-2 border-green-800' > 4 div >
div >
corps >
Dans ce code :
- ' mx-4 ' ajoute une marge de 4 pixels à gauche et à droite des éléments pour rendre la sortie plus optimisée.
- ' mon-4 ' ajoute une marge de 4 pixels sur l'axe y (haut et bas).
- ' space-y-4 ' ajoute un espace de 4 pixels sur l'axe y (haut et bas).
Sortir
Enregistrez le code ci-dessus et prévisualisez la page Web créée par celui-ci pour voir l'espacement comme :
Il s’agit d’attribuer un espace égal entre les éléments.
Conclusion
Pour attribuer un espace égal entre plusieurs éléments dans Tailwind, les utilisateurs peuvent utiliser le « espace-{x/y}-{taille} 'classe utilitaire et spécifiez une valeur entière comme taille en fonction des besoins. Un espacement égal entre les éléments rend la sortie plus évolutive et les téléspectateurs restent engagés avec la page Web. Cet article a fourni la méthode pour attribuer un espace égal entre plusieurs éléments dans Tailwind.