V CSS Tailwind, vypchávka je priestor medzi obsahom konkrétneho prvku a jeho okrajom. Horizontálne polstrovanie je priestor na ľavej a pravej strane prvku, pričom vertikálne polstrovanie je priestor v hornej a dolnej časti prvku. Tailwind ponúka rôzne úžitkové triedy na pridanie horizontálneho alebo vertikálneho čalúnenia k požadovaným prvkom.
Tento článok bude ilustrovať:
Ako pridať horizontálne čalúnenie v Tailwind?
Ak chcete do prvku v Tailwinde pridať vodorovnú výplň, použije sa trieda „px-
Syntax
< element trieda = 'px-0 ...' > ... element >
Tu „px“ predstavuje „os x“ alebo „horizontálnu výplň“.
Príklad: Použitie horizontálneho odsadenia na prvok HTML
V tomto príklade použijeme „ px-20 'úžitková trieda s ' Ak chcete do prvku v Tailwinde pridať zvislé odsadenie, použite „ py- Syntax Príklad: Použitie vertikálneho odsadenia na prvok HTML V tomto príklade použijeme „ py-20 'úžitková trieda s ' Ak chcete v Tailwinde pridať horizontálne a vertikálne odsadenie, „ px-
< telo >
< div trieda = 'bg-ružová-600 px-20 w-max' >
Vypchávka v Tailwind CSS
div >
telo >
Výkon
Vyššie uvedený výstup zobrazuje výplň na ľavej a pravej strane nádoby. To znamená, že horizontálna výplň bola úspešne aplikovaná na prvok kontajnera. Ako pridať zvislé čalúnenie v systéme Tailwind?
Tu „py“ predstavuje „os y“ alebo „vertikálne výplň“.
< div trieda = 'bg-ružová-600 py-20 w-max' >
Vypchávka v Tailwind CSS
div >
telo >
Výkon
Vyššie uvedený výstup zobrazuje výplň na hornej a spodnej strane nádoby. To znamená, že vertikálna výplň bola účinne aplikovaná na kontajnerový prvok. Záver