V CSS Tailwind se odsazení používá k přidání mezery mezi obsah konkrétního prvku a jeho okraje. Přidá další mezery uvnitř prvku. Tailwind CSS poskytuje sadu obslužných programů pro odsazení a hodnot odsazení, které uživatelům umožňují přizpůsobit rozmístění požadovaných prvků. Kromě toho mohou uživatelé přidat výplň na jednu stranu, například na horní, spodní, levou nebo pravou stranu určitého prvku.
Tento blog předvede příklady přidání odsazení na jednu stranu prvku v Tailwind CSS.
Jak přidat výplň na jednu stranu ve službě Tailwind?
Chcete-li přidat odsazení na jednu stranu prvku v Tailwindu, lze použít následující třídy obslužných programů:
Abyste tomu lépe porozuměli, podívejte se na níže uvedené příklady.
Příklad 1: Přidejte výplň na horní část prvku
V tomto příkladu použijeme „ bod-10 'užitná třída v ' Příklad 2: Přidejte výplň do spodní části prvku V tomto příkladu použijeme „ pb-10 “ třídy v “ Příklad 3: Přidejte výplň napravo od prvku V tomto příkladu použijeme „ pr-10 “ třídy v “ Příklad 4: Přidejte výplň vlevo od prvku V tomto příkladu použijeme „ pl-10 “ třídy v “ Chcete-li přidat odsazení na jednu stranu prvku v Tailwindu, lze použít různé třídy obslužných programů, například „ pl-
< div třída = 'bg-růžová-600 pt-10 w-max' >
Vycpávka v Tailwind CSS
div >
tělo >
Výstup
Výše uvedený výstup ukazuje, že výplň byla přidána do horní části kontejneru.
< div třída = 'bg-růžová-600 pb-10 w-max' >
Vycpávka v Tailwind CSS
div >
tělo >
Výstup
Je vidět, že na dno nádoby byla přidána výplň.
< div třída = 'bg-růžová-600 pr-10 w-max' >
Vycpávka v Tailwind CSS
div >
tělo >
Výstup
Výše uvedený výstup ukazuje, že výplň byla přidána napravo od prvku kontejneru.
< div třída = 'bg-růžová-600 pl-10 w-max' >
Vycpávka v Tailwind CSS
div >
tělo >
Výstup
Lze pozorovat, že vycpávka byla přidána na levou stranu nádoby. Závěr