I Tailwind CSS er ' mellemrum mellem ” hjælpeprogrammer bruges til at kontrollere mellemrummet mellem underordnede elementer af flex- eller gitterbeholdere. Det tilbyder forskellige klasser, såsom 'mellemrum-x-
Denne guide vil eksemplificere metoden til at bruge en negativ rumværdi i Tailwind.
Hvordan bruger man en negativ rumværdi i medvind?
For at bruge en negativ mellemrumsværdi i Tailwind skal du først lave en HTML-struktur. Brug derefter bindestreg ' – ” med det ønskede “mellemrum mellem” hjælpeklasser for at konvertere det til en negativ værdi. Det ' -mellemrum-x-
Lad os gennemgå nedenstående eksempler for at forstå det bedre.
Eksempel 1: Anvend en negativ vandret afstand mellem elementer
I dette eksempel har vi en flexbeholder med nogle underordnede elementer på række. Vi vil bruge ' -mellemrum-x-8 ” klasse for at anvende den negative vandrette afstand mellem flexelementer:
< legeme >< div klasse = 'flex -space-x-8 m-10 h-20 w-max' >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div klasse = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
legeme >
Her i elementet forældre
-
- “ bøje ” klasse skaber et fleksibelt layout.
- “ -mellemrum-x-8 ” klasse tilføjer 8 enheder negativ vandret afstand mellem flexelementer i en container.
- “ m-10 ” klasse tilføjer en margen på 10 enheder til alle sider af containeren.
- “ h-20 ” klasse indstiller containerens højde til 20 enheder.
- “ w-max ” klasse indstiller containerens bredde til dens maksimale indholdsbredde.
I de underordnede
-
- “ bg-teal-500 ” klasse indstiller baggrunden for flex-elementer til blågrøn.
- “ w-20 ” klasse indstiller bredden af hver flexvare til 20 enheder.
- “ p-5 ” klasse tilføjer 5 enheder polstring til alle sider af hver flex-vare.
- “ grænse-2 ” klasse indstiller containerens kantbredde til 2 enheder.
- “ border-teal-800 ” klasse anvender blågrøn farve på kanten.
Produktion
Ovenstående output viser, at flex-elementerne overlapper hinanden. Dette indikerer, at den negative vandrette mellemrumsværdi er blevet anvendt med succes.
Eksempel 2: Anvend et negativt lodret mellemrum mellem elementer
I dette eksempel har vi en flex container med nogle underordnede elementer i en kolonne. Vi vil bruge ' -mellemrum-y-7 ” klasse for at anvende den negative lodrette afstand mellem flexelementer:
< legeme >< div klasse = 'flex flex-col -space-y-7 m-10 text-center' >
< div klasse = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div klasse = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div klasse = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div klasse = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
legeme >
Her:
-
- “ bøje ” klasse skaber et fleksibelt layout.
- “ flex-col ” klasse justerer flex-emnerne i lodret retning.
- “ -space-y-5 ” klasse tilføjer 7 enheder negativ lodret afstand mellem flex-elementer i en container.
- “ m-10 ” klasse tilføjer en margen på 10 enheder til alle sider af containeren.
- “ tekst-center ” klasse justerer teksten i beholderen til midten.
Produktion
Det kan ses, at flexelementerne overlapper hinanden. Dette indikerer, at den negative lodrette mellemrumsværdi er blevet anvendt.
Konklusion
For at bruge en negativ mellemrumsværdi i Tailwind skal du bruge ' -mellemrum-x-