Dans Tailwind CSS, le « l'espace entre 'Les utilitaires sont utilisés pour contrôler l'espace entre les éléments enfants des conteneurs flexibles ou grillagés. Il propose diverses classes, telles que « space-x-
Ce guide illustrera la méthode d'utilisation d'une valeur d'espace négative dans Tailwind.
Comment utiliser une valeur d’espace négative dans Tailwind ?
Pour utiliser une valeur d'espace négative dans Tailwind, commencez par créer une structure HTML. Ensuite, utilisez le tiret ' – » avec « l’espace entre » les classes d’utilitaires souhaitées pour le convertir en une valeur négative. Le ' -espace-x-
Passons en revue les exemples ci-dessous pour mieux le comprendre.
Exemple 1 : appliquer un espacement horizontal négatif entre les éléments
Dans cet exemple, nous avons un conteneur flexible avec quelques éléments enfants alignés. Nous utiliserons le « -espace-x-8 ' pour appliquer l'espacement horizontal négatif entre les éléments flexibles :
< corps >< div classe = 'flex -espace-x-8 m-10 h-20 w-max' >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div classe = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
corps >
Ici, dans l'élément parents
-
- ' fléchir ' La classe crée une mise en page flexible.
- ' -espace-x-8 ' La classe ajoute 8 unités d'espacement horizontal négatif entre les éléments flexibles dans un conteneur.
- ' m-10 ' La classe ajoute une marge de 10 unités sur tous les côtés du conteneur.
- ' h-20 ' La classe définit la hauteur du conteneur à 20 unités.
- ' w-max ' La classe définit la largeur du conteneur sur sa largeur de contenu maximale.
Dans les éléments
-
- ' bg-sarcelle-500 ' La classe définit l'arrière-plan des éléments flexibles sur bleu sarcelle.
- ' w-20 ' La classe définit la largeur de chaque élément flexible à 20 unités.
- ' p-5 'La classe ajoute 5 unités de rembourrage sur tous les côtés de chaque élément flexible.
- ' frontière-2 ' La classe définit la largeur de la bordure du conteneur sur 2 unités.
- ' bordure-sarcelle-800 'La classe applique la couleur sarcelle à la bordure.
Sortir
Le résultat ci-dessus montre que les éléments flexibles se chevauchent. Cela indique que la valeur d'espace horizontal négative a été appliquée avec succès.
Exemple 2 : appliquer un espacement vertical négatif entre les éléments
Dans cet exemple, nous avons un conteneur flexible avec quelques éléments enfants dans une colonne. Nous utiliserons le « -space-y-7 ' classe pour appliquer l'espacement vertical négatif entre les éléments flexibles :
< corps >< div classe = 'flex flex-col -space-y-7 m-10 texte-centre' >
< div classe = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div classe = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div classe = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div classe = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
corps >
Ici:
-
- ' fléchir ' La classe crée une mise en page flexible.
- ' col flexible ' La classe aligne les éléments flexibles dans une direction verticale.
- ' -space-y-5 ' La classe ajoute 7 unités d'espacement vertical négatif entre les éléments flexibles dans un conteneur.
- ' m-10 ' La classe ajoute une marge de 10 unités sur tous les côtés du conteneur.
- ' centre de texte ' La classe aligne le texte du conteneur au centre.
Sortir
On peut voir que les éléments flexibles se chevauchent. Cela indique que la valeur d'espace vertical négative a été appliquée avec succès.
Conclusion
Pour utiliser une valeur d'espace négative dans Tailwind, utilisez le ' -espace-x-