Cum să adăugați umplutură orizontală și verticală în Tailwind?

Cum Sa Adaugati Umplutura Orizontala Si Verticala In Tailwind



În CSS Tailwind, umplutura este spațiul dintre conținutul elementului specific și marginea acestuia. Captuseala orizontala este spațiul din partea stângă și dreaptă a elementului, în timp ce căptușeală verticală este spațiul din partea de sus și de jos a unui element. Tailwind oferă diferite clase de utilitate pentru a adăuga căptușeală orizontală sau verticală elementelor dorite.

Acest articol va ilustra:







Cum să adăugați umplutură orizontală în Tailwind?

Pentru a adăuga padding orizontal la un element în Tailwind, clasa „px-” este utilizată cu elementul dorit în programul HTML. Utilizatorii pot specifica diferite valori pentru dimensiunea căptușelii. Această clasă adaugă umplutură de-a lungul axei x, adică atât în ​​partea stângă, cât și în partea dreaptă a elementului.



Sintaxă



< element clasă = „px-0...” > ... element >


Aici „px” reprezintă „axa x” sau „padding orizontal”.





Exemplu: aplicarea umpluturii orizontale unui element HTML

În acest exemplu, vom folosi „ px-20 ” clasa de utilitate cu “

” element pentru a adăuga căptușeală orizontală:



< corp >

< div clasă = „bg-roz-600 px-20 w-max” >
Captuseala în Tailwind CSS
div >

corp >


Ieșire


Ieșirea de mai sus arată căptușeala în partea stângă și dreaptă a containerului. Acest lucru indică faptul că umplutura orizontală a fost aplicată cu succes pe elementul containerului.

Cum să adăugați umplutură verticală în Tailwind?

Pentru a adăuga umplutură verticală unui element în Tailwind, utilizați „ py- ” clasă de utilitate cu elementul specific din programul HTML. Această clasă adaugă umplutură de-a lungul axei y, adică atât în ​​partea superioară, cât și în partea inferioară a elementului.

Sintaxă

< element clasă = 'py-0...' > ... element >


Aici „py” reprezintă „axa y” sau „padding vertical”.

Exemplu: aplicarea umpluturii verticale unui element HTML

În acest exemplu, vom folosi „ py-20 ” clasa de utilitate cu “

” element pentru a adăuga căptușeală verticală:

< corp >

< div clasă = „bg-roz-600 py-20 w-max” >
Captuseala în Tailwind CSS
div >

corp >


Ieșire


Ieșirea de mai sus arată căptușeala în partea de sus și de jos a containerului. Acest lucru indică faptul că căptușeala verticală a fost aplicată efectiv pe elementul containerului.

Concluzie

Pentru a adăuga umplutura orizontală și verticală în Tailwind, „ px- ' și ' py- ” clasele de utilitate sunt folosite cu elementele dorite în programul HTML respectiv. Utilizatorii pot specifica diferite valori pentru a aplica umplutură în stânga și dreapta sau în partea de sus și de jos a unui element. Acest articol a ilustrat metoda completă de aplicare a umpluturii orizontale și verticale în Tailwind.