Pakalpojumā Tailwind CSS polsterējums tiek izmantots, lai pievienotu atstarpi starp konkrētā elementa saturu un tā apmalēm. Tas pievieno papildu atstarpi elementa iekšpusē. Tailwind CSS nodrošina polsterējuma utilītu un aizpildīšanas vērtību kopu, kas lietotājiem ļauj pielāgot vēlamo elementu atstarpi. Turklāt lietotāji var pievienot polsterējumu vienai konkrēta elementa pusei, piemēram, augšpusē, apakšā, kreisajā vai labajā pusē.
Šajā emuārā tiks parādīti piemēri, kā pievienot polsterējumu vienai elementa pusei programmā Tailwind CSS.
Kā pievienot polsterējumu vienai pusei aizmugurējā vējā?
Lai pievienotu polsterējumu 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 polsterējumu elementa augšpusē
Šajā piemērā mēs izmantosim ' pt-10 komunālo pakalpojumu klasē 2. piemērs. Pievienojiet polsterējumu elementa apakšai Šajā piemērā mēs izmantosim ' pb-10 ” klasē “ 3. piemērs. Pievienojiet polsterējumu pa labi no elementa Šajā piemērā mēs izmantosim ' pr-10 ” klasē “ 4. piemērs. Pievienojiet polsterējumu elementa kreisajā pusē Šajā piemērā mēs izmantosim ' pl-10 ” klasē “ Lai pievienotu polsterējumu vienai elementa pusei programmā Tailwind, var izmantot dažādas lietderības klases, piemēram, “ pl-
< div klasē = 'bg-rozā-600 pt-10 w-max' >
Polsterējums iekšā Tailwind CSS
div >
ķermeni >
Izvade
Iepriekš redzamā izvade parāda, ka polsterējums ir pievienots konteinera augšpusē.
< div klasē = 'bg-rozā-600 pb-10 w-max' >
Polsterējums iekšā Tailwind CSS
div >
ķermeni >
Izvade
Var redzēt, ka konteinera apakšai ir pievienots polsterējums.
< div klasē = 'bg-pink-600 pr-10 w-max' >
Polsterējums iekšā Tailwind CSS
div >
ķermeni >
Izvade
Iepriekš redzamā izvade parāda, ka polsterējums ir pievienots konteinera elementa labajā pusē.
< div klasē = 'bg-rozā-600 pl-10 w-max' >
Polsterējums iekšā Tailwind CSS
div >
ķermeni >
Izvade
Var novērot, ka polsterējums ir pievienots konteinera kreisajā pusē. Secinājums