Ako pridať výplň na jednu stranu v Tailwinde?

Ako Pridat Vypln Na Jednu Stranu V Tailwinde



V CSS Tailwind sa odsadenie používa na pridanie priestoru medzi obsahom konkrétneho prvku a jeho okrajmi. Pridáva dodatočný priestor vo vnútri prvku. Tailwind CSS poskytuje sadu pomôcok a hodnôt výplne, ktoré používateľom umožňujú prispôsobiť rozstup požadovaných prvkov. Okrem toho môžu používatelia pridať výplň na jednu stranu, napríklad na hornú, spodnú, ľavú alebo pravú stranu konkrétneho prvku.

Tento blog demonštruje príklady pridania odsadenia na jednu stranu prvku v CSS Tailwind.







Ako pridať výplň na jednu stranu v Tailwinde?

Ak chcete pridať odsadenie na jednu stranu prvku v Tailwinde, môžete použiť nasledujúce pomocné triedy:



Aby ste tomu lepšie porozumeli, pozrite si príklady uvedené nižšie.



Príklad 1: Pridajte výplň do hornej časti prvku





V tomto príklade použijeme „ pt-10 ” úžitková trieda v “

” na pridanie 10 jednotiek výplne na jeho vrch:

< telo >

< div trieda = 'bg-ružová-600 pt-10 w-max' >
Vypchávka v Tailwind CSS
div >

telo >


Výkon




Vyššie uvedený výstup ukazuje, že na vrch nádoby bola pridaná výplň.

Príklad 2: Pridajte výplň na spodok prvku

V tomto príklade použijeme „ pb-10 “trieda v “

” na pridanie 10 jednotiek výplne na jeho spodok:

< telo >

< div trieda = 'bg-ružová-600 pb-10 w-max' >
Vypchávka v Tailwind CSS
div >

telo >


Výkon


Je vidieť, že na dno nádoby bola pridaná výplň.

Príklad 3: Pridajte výplň napravo od prvku

V tomto príklade použijeme „ pr-10 “trieda v “

” na pridanie 10 jednotiek výplne vpravo:

< telo >

< div trieda = 'bg-ružová-600 pr-10 w-max' >
Vypchávka v Tailwind CSS
div >

telo >


Výkon


Vyššie uvedený výstup ukazuje, že výplň bola pridaná napravo od prvku kontajnera.

Príklad 4: Pridajte výplň naľavo od prvku

V tomto príklade použijeme „ pl-10 “trieda v “

” na pridanie 10 jednotiek výplne vľavo:

< telo >

< div trieda = 'bg-ružová-600 pl-10 w-max' >
Vypchávka v Tailwind CSS
div >

telo >


Výkon


Je možné pozorovať, že výplň bola pridaná na ľavej strane nádoby.

Záver

Na pridanie výplne na jednu stranu prvku v Tailwinde možno použiť rôzne pomocné triedy, ako napríklad „ pl- “, “ pr- “, “ pt- “ a „ pb- “. Tieto triedy pridávajú výplň na ľavú, pravú, hornú a dolnú stranu konkrétneho prvku. Používatelia môžu určiť rôzne hodnoty veľkosti výplne. Tento blog demonštroval príklady pridania výplne na jednu stranu prvku v Tailwind CSS.