Kā pievienot rezervi vienai pusei aizmugurējā vējā?

Ka Pievienot Rezervi Vienai Pusei Aizmugureja Veja



Tailwind CSS, a starpība tiek izmantots, lai kontrolētu atstarpi ap konkrēto elementu. Tas palielina atstarpi starp lietoto elementu un to apkārtējiem elementiem. Tailwind CSS nodrošina piemales utilītu un piemales vērtību kopu, kas lietotājiem ļauj pielāgot atstarpi ap vēlamajiem elementiem. Turklāt lietotāji var pievienot piemales vienai pusei, piemēram, konkrēta elementa augšpusē, apakšā, kreisajā vai labajā pusē.

Šajā emuārā tiks parādīti piemēri, kā Tailwind CSS elementa vienai pusei pievienot piemali.







Kā pievienot rezervi vienai pusei aizmugurējā vējā?

Lai pievienotu piemali vienai elementa pusei programmā Tailwind, var izmantot šādas lietderības klases:



Lai to labāk izprastu, skatiet tālāk sniegtos piemērus.



1. piemērs: pievienojiet piemales elementa augšpusē





Šajā piemērā mēs izmantosim ' mt-14 komunālo pakalpojumu klasē

” elements, lai tā augšdaļā pievienotu 14 piemales vienības:

< ķermeni >

< div klasē = 'h-96 mt-14 bg-purple-500' >

< lpp klasē = 'text-5xl text-center' > Marža iekšā Tailwind CSS lpp >

div >

ķermeni >


Šeit:



    • ' h-96 ” klase iestata konteinera
      augstumu uz 96 vienībām.
    • ' mt-14 ” klase piemēro 14 rezervju vienības konteinera augšpusē.
    • ' bg-violeta-500 ” klase iestata purpursarkano krāsu konteinera fonam.

Izvade


Iepriekš redzamā izvade parāda, ka konteinera augšpusē ir pievienota piemale.

2. piemērs: pievienojiet rezervi elementa apakšai

Šajā piemērā mēs izmantosim ' mb-14 ” klasē “

” elements, lai tā apakšā pievienotu 14 piemales vienības:

< ķermeni >

< div klasē = 'h-96 mb-14 bg-purple-500' >

< lpp klasē = 'text-5xl text-center' > Marža iekšā Tailwind CSS lpp >

div >

ķermeni >


Izvade


Var redzēt, ka konteinera apakšai ir pievienota piemale.

3. piemērs: pievienojiet piemali elementa kreisajā pusē

Šajā piemērā mēs izmantosim ' ml-14 ” klasē “

” elementu, lai pievienotu 14 piemales vienības tā kreisajā pusē:

< ķermeni >

< div klasē = 'h-96 ml-14 bg-purple-500' >

< lpp klasē = 'text-5xl text-center' > Marža iekšā Tailwind CSS lpp >

div >

ķermeni >


Izvade


Iepriekš redzamā izvade parāda, ka konteinera elementa kreisajā pusē ir pievienota piemale.

4. piemērs: pievienojiet piemales elementa labajā pusē

Šajā piemērā mēs izmantosim ' kungs-14 ” klasē “

” elements, lai pievienotu 14 piemales vienības tā labajā pusē:

< ķermeni >

< div klasē = 'h-96 mr-14 bg-purple-500' >

< lpp klasē = 'text-5xl text-center' > Marža iekšā Tailwind CSS lpp >

div >

ķermeni >


Izvade


Kā redzat, piemale ir efektīvi pievienota konteinera labajā pusē.

Secinājums

Lai pievienotu piemali vienai elementa pusei programmā Tailwind, var izmantot dažādas lietderības klases, piemēram, “ ml- ”, “ mr- ”, “ mt- ', un ' mb- ”. Šīs klases pievieno rezervi konkrētā elementa kreisajā, labajā, augšējā un apakšējā malā. Lietotāji var norādīt dažādas piemales lieluma vērtības. Šajā emuārā ir parādīti piemēri, kā Tailwind CSS elementa vienai pusei pievienot piemali.