În CSS Tailwind, „ spatiu intre ” utilitățile sunt folosite pentru a controla spațiul dintre elementele copil ale containerelor flex sau grid. Oferă diferite clase, cum ar fi „spațiu-x-
Acest ghid va exemplifica metoda de utilizare a unei valori negative a spațiului în Tailwind.
Cum să utilizați o valoare de spațiu negativă în Tailwind?
Pentru a utiliza o valoare de spațiu negativ în Tailwind, mai întâi, creați o structură HTML. Apoi, utilizați liniuța „ – ” cu „spațiul” dorit între clasele de utilitate pentru a-l converti într-o valoare negativă. „ -spațiu-x-
Să trecem prin exemplele de mai jos pentru a înțelege mai bine.
Exemplul 1: Aplicați o distanță orizontală negativă între elemente
În acest exemplu, avem un container flexibil cu câteva elemente copil pe rând. Vom folosi „ -spațiu-x-8 ” clasă pentru a aplica distanța orizontală negativă între elementele flexibile:
< corp >< div clasă = 'flex -space-x-8 m-10 h-20 w-max' >
< div clasă = „bg-teal-500 w-20 p-5 border-2 border-teal-800” > 1 div >
< div clasă = „bg-teal-500 w-20 p-5 border-2 border-teal-800” > 2 div >
< div clasă = „bg-teal-500 w-20 p-5 border-2 border-teal-800” > 3 div >
< div clasă = „bg-teal-500 w-20 p-5 border-2 border-teal-800” > 4 div >
< div clasă = „bg-teal-500 w-20 p-5 border-2 border-teal-800” > 5 div >
< div clasă = „bg-teal-500 w-20 p-5 border-2 border-teal-800” > 6 div >
div >
corp >
Aici, în elementul părinți
-
- „ contracta ” clasa creează un aspect flexibil.
- „ -spațiu-x-8 ” clasa adaugă 8 unități de distanță orizontală negativă între elementele flexibile dintr-un container.
- „ m-10 ” clasa adaugă o marjă de 10 unități pe toate părțile containerului.
- „ h-20 ” clasa setează înălțimea containerului la 20 de unități.
- „ w-max ” clasa setează lățimea containerului la lățimea maximă a conținutului.
În elementele
-
- „ bg-teal-500 ” clasa setează fundalul elementelor flexibile la ceai.
- „ w-20 ” clasa setează lățimea fiecărui element flexibil la 20 de unități.
- „ p-5 ” clasa adaugă 5 unități de umplutură pe toate părțile fiecărui articol flexibil.
- „ granita-2 ” clasa setează lățimea chenarului containerului la 2 unități.
- „ border-teal-800 ” clasa aplică culoarea verdeață la chenar.
Ieșire
Rezultatul de mai sus arată că elementele flexibile se suprapun. Aceasta indică faptul că valoarea negativă a spațiului orizontal a fost aplicată cu succes.
Exemplul 2: Aplicați o distanță verticală negativă între elemente
În acest exemplu, avem un container flexibil cu câteva elemente copil într-o coloană. Vom folosi „ -spațiu-y-7 ” clasă pentru a aplica distanța verticală negativă între elementele flexibile:
< corp >< div clasă = „flex flex-col -space-y-7 m-10 text-center” >
< div clasă = „bg-teal-500 p-5 chenar-2 chenar-teal-800” > 1 div >
< div clasă = „bg-teal-500 p-5 chenar-2 chenar-teal-800” > 2 div >
< div clasă = „bg-teal-500 p-5 chenar-2 chenar-teal-800” > 3 div >
< div clasă = „bg-teal-500 p-5 chenar-2 chenar-teal-800” > 4 div >
div >
corp >
Aici:
-
- „ contracta ” clasa creează un aspect flexibil.
- „ flex-col ” clasa aliniază elementele flexibile într-o direcție verticală.
- „ -spațiu-y-5 ” clasa adaugă 7 unități de distanță verticală negativă între elementele flexibile dintr-un container.
- „ m-10 ” clasa adaugă o marjă de 10 unități pe toate părțile containerului.
- „ centru de text ” clasa aliniază textul containerului la centru.
Ieșire
Se poate observa că elementele flexibile se suprapun. Aceasta indică faptul că valoarea negativă a spațiului vertical a fost aplicată cu succes.
Concluzie
Pentru a utiliza o valoare de spațiu negativă în Tailwind, utilizați „ -spațiu-x-