Kā pievienot horizontālo un vertikālo polsterējumu aizmugurējā vējā?

Ka Pievienot Horizontalo Un Vertikalo Polsterejumu Aizmugureja Veja



Pakalpojumā Tailwind CSS, polsterējums ir telpa starp konkrētā elementa saturu un tā robežu. Horizontālais polsterējums ir telpa elementa kreisajā un labajā pusē, savukārt vertikālais polsterējums ir vieta elementa augšdaļā un apakšā. Tailwind piedāvā dažādas lietderības klases, lai vēlamajiem elementiem pievienotu horizontālu vai vertikālu polsterējumu.

Šis raksts ilustrēs:







Kā pievienot horizontālo polsterējumu aizmugurējā vējā?

Lai programmā Tailwind elementam pievienotu horizontālu polsterējumu, HTML programmā kopā ar vajadzīgo elementu tiek izmantota klase “px-”. Lietotāji var norādīt dažādas polsterējuma izmēra vērtības. Šī klase pievieno polsterējumu gar x asi, t.i., gan elementa kreisajā, gan labajā pusē.



Sintakse



< elements klasē = 'px-0...' > ... elements >


Šeit “px” apzīmē “x asi” vai “horizontālo polsterējumu”.





Piemērs: Horizontālā polsterējuma lietošana HTML elementam

Šajā piemērā mēs izmantosim ' px-20 komunālo pakalpojumu klase ar '

” elements, lai pievienotu tam horizontālu polsterējumu:



< ķermeni >

< div klasē = 'bg-rozā-600 px-20 w-max' >
Polsterējums iekšā Tailwind CSS
div >

ķermeni >


Izvade


Iepriekš redzamajā izvadē ir redzams polsterējums konteinera kreisajā un labajā pusē. Tas norāda, ka konteinera elementam ir veiksmīgi piemērots horizontālais polsterējums.

Kā pievienot vertikālu polsterējumu aizmugurējā vējā?

Lai pievienotu vertikālu polsterējumu elementam Tailwind, izmantojiet “ py- ” lietderības klase ar konkrēto elementu HTML programmā. Šī klase pievieno polsterējumu gar y asi, t.i., gan elementa augšējai, gan apakšējai malai.

Sintakse

< elements klasē = 'py-0 ...' > ... elements >


Šeit “py” apzīmē “y asi” vai “vertikālo polsterējumu”.

Piemērs: Vertikālā polsterējuma lietošana HTML elementam

Šajā piemērā mēs izmantosim ' py-20 komunālo pakalpojumu klase ar '

” elements, lai tam pievienotu vertikālu polsterējumu:

< ķermeni >

< div klasē = 'bg-pink-600 py-20 w-max' >
Polsterējums iekšā Tailwind CSS
div >

ķermeni >


Izvade


Iepriekš redzamajā izvadē ir redzams polsterējums konteinera augšpusē un apakšā. Tas norāda, ka konteinera elementam ir efektīvi piemērots vertikālais polsterējums.

Secinājums

Lai programmā Tailwind pievienotu horizontālo un vertikālo polsterējumu, “ px- ' un ' py- ” lietderības klases tiek izmantotas attiecīgi ar vēlamajiem elementiem HTML programmā. Lietotāji var norādīt dažādas vērtības, lai izmantotu polsterējumu elementa kreisajā un labajā pusē vai augšpusē un apakšā. Šajā rakstā ir ilustrēta visa metode, kā izmantot Tailwind horizontālo un vertikālo polsterējumu.