Jak přidat horizontální a vertikální odsazení v Tailwind?

Jak Pridat Horizontalni A Vertikalni Odsazeni V Tailwind



V CSS Tailwind vycpávka je prostor mezi obsahem konkrétního prvku a jeho okrajem. Horizontální polstrování je prostor na levé a pravé straně prvku, zatímco vertikální polstrování je prostor v horní a spodní části prvku. Tailwind nabízí různé třídy užitných vlastností pro přidání horizontálního nebo vertikálního polstrování k požadovaným prvkům.

Tento článek bude ilustrovat:







Jak přidat horizontální odsazení v Tailwind?

Chcete-li k prvku v Tailwindu přidat vodorovné odsazení, použije se třída „px-“ s požadovaným prvkem v programu HTML. Uživatelé mohou zadat různé hodnoty velikosti výplně. Tato třída přidává výplň podél osy x, tj. na levou i pravou stranu prvku.



Syntax



< živel třída = 'px-0 ...' > ... živel >


Zde „px“ představuje „osu x“ nebo „horizontální výplň“.





Příklad: Použití vodorovného odsazení na prvek HTML

V tomto příkladu použijeme „ px-20 'užitná třída s '

” prvek pro přidání vodorovného odsazení:



< tělo >

< div třída = 'bg-růžová-600 px-20 w-max' >
Vycpávka v Tailwind CSS
div >

tělo >


Výstup


Výše uvedený výstup ukazuje výplň na levé a pravé straně kontejneru. To znamená, že horizontální výplň byla úspěšně aplikována na prvek kontejneru.

Jak přidat vertikální odsazení v Tailwindu?

Chcete-li k prvku v Tailwindu přidat svislé odsazení, použijte „ py- ” třída utility s konkrétním prvkem v programu HTML. Tato třída přidává výplň podél osy y, tj. na horní i spodní stranu prvku.

Syntax

< živel třída = 'py-0 ...' > ... živel >


Zde „py“ představuje „osu y“ nebo „svislé odsazení“.

Příklad: Použití svislého odsazení na prvek HTML

V tomto příkladu použijeme „ py-20 'užitná třída s '

“, chcete-li k němu přidat svislé odsazení:

< tělo >

< div třída = 'bg-růžová-600 py-20 w-max' >
Vycpávka v Tailwind CSS
div >

tělo >


Výstup


Výše uvedený výstup ukazuje vycpávky na horní a spodní straně nádoby. To znamená, že vertikální vycpávka byla účinně aplikována na kontejnerový prvek.

Závěr

Chcete-li v Tailwindu přidat vodorovné a svislé odsazení, px- ' a ' py- ” třídy obslužných programů se používají s požadovanými prvky v programu HTML. Uživatelé mohou zadat různé hodnoty pro použití odsazení vlevo a vpravo nebo nahoře a dole na prvku. Tento článek ilustruje úplný způsob použití vodorovného a svislého odsazení ve službě Tailwind.