Kā Tailwind režīmā pievienot polsterējumu visām pusēm?

Ka Tailwind Rezima Pievienot Polsterejumu Visam Pusem



Tailwind CSS ir labi zināms ietvars, ko izmanto, lai izveidotu pielāgojamas un atsaucīgas tīmekļa lapas vai dizainu. Tas arī ļauj lietotājiem kontrolēt elementu izkārtojumu un atstarpes, nerakstot pielāgotu CSS. Polsterējums ir atstarpe starp konkrētā elementa saturu un tā apmali. Dažreiz lietotāji vēlas izmantot vienādu polsterējumu katrā elementa pusē. Tailwind nodrošina lietderības klases, lai izmantotu polsterējumu visām elementa pusēm vai noteiktām pusēm, piemēram, augšpusē, labajā pusē, apakšā vai kreisajā pusē.

Šajā rakstā tiks parādīta metode, kā pievienot polsterējumu visām elementa pusēm programmā Tailwind.







Kā pievienot polsterējumu visām pusēm aizmugurējā vējā?

Lai pievienotu polsterējumu visām noteikta elementa pusēm programmā Tailwind, izveidojiet HTML struktūru. Pēc tam izmantojiet lietderības klasi “p-” ar konkrēto elementu. Lai elementam izmantotu polsterējumu, ir jānorāda vēlamā vērtība. Pēc tam pārbaudiet HTML tīmekļa lapu, lai nodrošinātu izmaiņas.



Sintakse



< elements klasē = 'p-' ... elements >


Aizstājiet “” ar jebkuru vēlamo skaitli, piemēram, 2, 4, 12, 20 utt.





Piemērs

Šajā piemērā mums ir divi '

” elementi, un mēs izmantosim divus dažādus polsterējumus, t.i. p-8 ' un ' p-14 ' uz viņiem:



< ķermeni >

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

< br >

< div klasē = 'bg-teal-600 p-14 w-max' >
Polsterējums iekšā Tailwind CSS
div >

ķermeni >


Šeit, pirmajā

:

    • ' bg-rozā-600 ” klase iestata rozā krāsu elementa
      fonam.
    • ' p-8 ” klase pievieno 8 polsterējuma vienības konteinera visām pusēm.
    • ' w-maks ” klase iestata
      elementa platumu līdz tā maksimālajam satura platumam.

Otrajā

:

    • ' bg-teal-600 ” klase iestata zilo krāsu elementa
      fonam.
    • ' p-14 ” klase uzliek 14 polsterējuma vienības konteinera visām pusēm.
    • ' w-maks ” klase iestata
      elementa platumu līdz tā maksimālajam satura platumam.

Izvade


Saskaņā ar iepriekš minēto izvadi norādītais polsterējums ir uzklāts uz visām abu konteineru pusēm.

Secinājums

Lai pievienotu polsterējumu visām elementa pusēm programmā Tailwind, utilīta klase “p-” tiek izmantota ar vajadzīgo elementu HTML programmā. Lietotājiem ir jānorāda konkrēta vērtība, lai elementam lietotu polsterējumu. Lai veiktu verifikāciju, apskatiet HTML tīmekļa lapu un nodrošiniet izmaiņas. Šajā rakstā ir parādīta metode, kā pievienot polsterējumu visām elementa pusēm programmā Tailwind.