Jak používat zápornou hodnotu prostoru ve službě Tailwind?

Jak Pouzivat Zapornou Hodnotu Prostoru Ve Sluzbe Tailwind

V Tailwind CSS je „ prostor mezi ” nástroje se používají k ovládání prostoru mezi podřízenými prvky flex nebo mřížkových kontejnerů. Nabízí různé třídy, jako je „mezera-x-“ a „mezera-y-“ pro použití vodorovného a svislého prostoru mezi podřízenými prvky. Kromě toho mohou uživatelé také používat negativní hodnotu s těmito nástroji k vytvoření mezery mezi prvky v opačném směru. Mohou být také použity k umístění jednoho prvku do jiného prvku.

Tato příručka bude příkladem metody použití záporné hodnoty mezery ve službě Tailwind.

Jak používat zápornou hodnotu prostoru ve službě Tailwind?

Chcete-li v Tailwindu použít zápornou hodnotu mezery, nejprve vytvořte strukturu HTML. Poté použijte pomlčku „ – ” s požadovanou „mezerou mezi“ třídami užitku, aby se převedla na zápornou hodnotu. ' -mezera-x- ' a ' -mezera-y- ” nástroje se často používají k umístění jednoho prvku do jiného prvku.

Pojďme si projít níže uvedené příklady, abychom tomu lépe porozuměli.

Příklad 1: Aplikujte zápornou vodorovnou vzdálenost mezi prvky

V tomto příkladu máme flex kontejner s některými podřízenými prvky v řadě. Budeme používat „ -mezera-x-8 třída ” pro použití záporné vodorovné mezery mezi ohybovými prvky:

< tělo >

< div třída = 'flex -space-x-8 m-10 h-20 w-max' >

< div třída = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div třída = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div třída = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div třída = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div třída = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div třída = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >

div >

tělo >

Zde v rodičovském prvku

:

- “ flex ” vytváří flexibilní rozvržení.
- “ -mezera-x-8 ” třída přidává 8 jednotek záporné horizontální mezery mezi ohebnými prvky v kontejneru.
- “ m-10 “ třída přidává na všechny strany kontejneru okraj 10 jednotek.
- “ h-20 ” class nastaví výšku kontejneru na 20 jednotek.
- “ w-max ” nastaví šířku kontejneru na maximální šířku obsahu.

V podřízených prvcích

:

- “ bg-teal-500 ” nastaví pozadí prvků flex na modrozelené.
- “ w-20 ” class nastaví šířku každé položky flex na 20 jednotek.
- “ p-5 “ třída přidává 5 jednotek vycpávky na všechny strany každé ohebné položky.
- “ hranice-2 ” class nastaví šířku okraje kontejneru na 2 jednotky.
- “ border-teal-800 Třída ” aplikuje na okraj modrozelenou barvu.

Výstup

Výše uvedený výstup ukazuje, že flex prvky se překrývají. To znamená, že záporná hodnota horizontálního prostoru byla úspěšně použita.

Příklad 2: Aplikujte zápornou vertikální vzdálenost mezi prvky

V tomto příkladu máme flex kontejner s některými podřízenými prvky ve sloupci. Budeme používat „ -mezera-y-7 třída ” pro použití záporné svislé mezery mezi ohybovými prvky:

< tělo >

< div třída = 'flex flex-col -space-y-7 m-10 text-center' >
< div třída = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div třída = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div třída = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div třída = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >

tělo >

Tady:

- “ flex ” vytváří flexibilní rozvržení.
- “ flex-col ” třída zarovná ohebné položky ve vertikálním směru.
- “ -mezera-y-5 ” třída přidává 7 jednotek záporné vertikální vzdálenosti mezi ohebnými prvky v kontejneru.
- “ m-10 “ třída přidává na všechny strany kontejneru okraj 10 jednotek.
- “ textové centrum ” třída zarovná text kontejneru na střed.

Výstup

Je vidět, že se flex prvky překrývají. To znamená, že záporná hodnota vertikální mezery byla úspěšně použita.

Závěr

Chcete-li v Tailwindu použít zápornou hodnotu mezery, použijte „ -mezera-x- ' a ' -mezera-y- ” nástroje s požadovaným flex nebo mřížkovým kontejnerem ve struktuře HTML. Tyto nástroje se často používají k umístění jednoho prvku do jiného prvku. Tato příručka je příkladem metody použití záporné hodnoty mezery ve službě Tailwind.