Ako používať zápornú hodnotu priestoru v Tailwinde?

Ako Pouzivat Zapornu Hodnotu Priestoru V Tailwinde

V CSS Tailwind sa „ priestor medzi ” pomôcky sa používajú na ovládanie priestoru medzi podriadenými prvkami ohybných alebo mriežkových kontajnerov. Ponúka rôzne triedy, ako napríklad „medzera-x-“ a „medzera-y-“ na použitie horizontálneho a vertikálneho priestoru medzi podradenými prvkami. Okrem toho môžu používatelia použiť aj negatívne hodnotu s týmito nástrojmi na vytvorenie medzier medzi prvkami v opačnom smere. Môžu byť tiež použité na umiestnenie jedného prvku do iného prvku.

Táto príručka bude príkladom metódy použitia zápornej hodnoty medzery v Tailwinde.

Ako používať zápornú hodnotu priestoru v Tailwinde?

Ak chcete v Tailwinde použiť zápornú hodnotu medzery, najprv vytvorte štruktúru HTML. Potom použite pomlčku „ – ” s požadovaným „medzerom medzi“ triedami úžitkových vlastností, aby sa previedol na zápornú hodnotu. ' -medzera-x- “ a „ -medzera-y- ” pomôcky sa často používajú na umiestnenie jedného prvku do iného prvku.

Poďme si prejsť nižšie uvedené príklady, aby sme to lepšie pochopili.

Príklad 1: Použitie záporného horizontálneho rozstupu medzi prvkami

V tomto príklade máme flexibilný kontajner s niektorými podriadenými prvkami v rade. Použijeme „ -medzera-x-8 ” na použitie záporného horizontálneho rozstupu medzi ohybnými prvkami:

< telo >

< div trieda = 'flex -space-x-8 m-10 h-20 w-max' >

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

div >

telo >

Tu v rodičovskom prvku

:

- “ flex ” vytvára flexibilné rozloženie.
- “ -medzera-x-8 ” trieda pridáva 8 jednotiek zápornej horizontálnej vzdialenosti medzi ohybnými prvkami v kontajneri.
- “ m-10 “ trieda pridáva okraj 10 jednotiek na všetky strany kontajnera.
- “ h-20 ” trieda nastavuje výšku kontajnera na 20 jednotiek.
- “ w-max ” nastaví šírku kontajnera na maximálnu šírku obsahu.

V podriadených prvkoch

:

- “ bg-teal-500 ” nastaví pozadie prvkov flex na modrozelené.
- “ w-20 ” class nastavuje šírku každej flexibilnej položky na 20 jednotiek.
- “ p-5 ” trieda pridáva 5 jednotiek výplne na všetky strany každej ohybnej položky.
- “ hranica-2 ” nastaví šírku okraja kontajnera na 2 jednotky.
- “ border-teal-800 “ trieda aplikuje na okraj modrozelenú farbu.

Výkon

Vyššie uvedený výstup ukazuje, že ohybné prvky sa prekrývajú. To znamená, že záporná hodnota horizontálneho priestoru bola úspešne použitá.

Príklad 2: Použitie záporného vertikálneho rozstupu medzi prvkami

V tomto príklade máme flexibilný kontajner s niektorými podriadenými prvkami v stĺpci. Použijeme „ -medzera-y-7 ” na použitie záporného vertikálneho rozstupu medzi ohybnými prvkami:

< telo >

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

telo >

Tu:

- “ flex ” vytvára flexibilné rozloženie.
- “ flex-kol ” trieda zarovná ohybné položky vo vertikálnom smere.
- “ -medzera-y-5 “ trieda pridáva 7 jednotiek zápornej vertikálnej vzdialenosti medzi ohybnými prvkami v kontajneri.
- “ m-10 “ trieda pridáva okraj 10 jednotiek na všetky strany kontajnera.
- “ textové centrum ” zarovná text kontajnera na stred.

Výkon

Je vidieť, že flex prvky sa prekrývajú. To znamená, že záporná hodnota vertikálneho priestoru bola úspešne použitá.

Záver

Ak chcete v Tailwinde použiť zápornú hodnotu medzery, použite „ -medzera-x- “ a „ -medzera-y- ” nástroje s požadovaným flex alebo grid kontajnerom v štruktúre HTML. Tieto nástroje sa často používajú na umiestnenie jedného prvku do iného prvku. Táto príručka je príkladom spôsobu použitia zápornej hodnoty medzery v Tailwinde.