Î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-
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 “ Pentru a adăuga umplutură verticală unui element în Tailwind, utilizați „ py- Sintaxă Exemplu: aplicarea umpluturii verticale unui element HTML În acest exemplu, vom folosi „ py-20 ” clasa de utilitate cu “ Pentru a adăuga umplutura orizontală și verticală în Tailwind, „ px-
< 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?
Aici „py” reprezintă „axa y” sau „padding vertical”.
< 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