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 “ Príklad 2: Pridajte výplň na spodok prvku V tomto príklade použijeme „ pb-10 “trieda v “ Príklad 3: Pridajte výplň napravo od prvku V tomto príklade použijeme „ pr-10 “trieda v “ Príklad 4: Pridajte výplň naľavo od prvku V tomto príklade použijeme „ pl-10 “trieda v “ Na pridanie výplne na jednu stranu prvku v Tailwinde možno použiť rôzne pomocné triedy, ako napríklad „ pl-
< 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ň.
< 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ň.
< 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.
< 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