Ako pridať horizontálne a vertikálne čalúnenie v Tailwind?

Ako Pridat Horizontalne A Vertikalne Calunenie V Tailwind



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-“ s požadovaným prvkom v programe HTML. Používatelia môžu určiť rôzne hodnoty veľkosti výplne. Táto trieda pridáva výplň pozdĺž osi x, t. j. na ľavú aj pravú stranu prvku.



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 '

” prvok na pridanie vodorovnej výplne:



< 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?

Ak chcete do prvku v Tailwinde pridať zvislé odsadenie, použite „ py- ” pomocná trieda so špecifickým prvkom v programe HTML. Táto trieda pridáva výplň pozdĺž osi y, t. j. na hornú aj dolnú stranu prvku.

Syntax

< element trieda = 'py-0 ...' > ... element >


Tu „py“ predstavuje „os y“ alebo „vertikálne výplň“.

Príklad: Použitie vertikálneho odsadenia na prvok HTML

V tomto príklade použijeme „ py-20 'úžitková trieda s '

” prvok na pridanie vertikálneho výplne:

< telo >

< 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

Ak chcete v Tailwinde pridať horizontálne a vertikálne odsadenie, „ px- “ a „ py- ” pomocné triedy sa používajú s požadovanými prvkami v programe HTML, resp. Používatelia môžu zadať rôzne hodnoty na použitie výplne vľavo a vpravo alebo hore a dole v prvku. Tento článok ilustruje úplný spôsob použitia vodorovného a zvislého odloženia v službe Tailwind.