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-
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 ' Chcete-li k prvku v Tailwindu přidat svislé odsazení, použijte „ py- Syntax 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 v Tailwindu přidat vodorovné a svislé odsazení, px-
< 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?
Zde „py“ představuje „osu y“ nebo „svislé odsazení“.
< 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