Nel CSS Tailwind, imbottitura è lo spazio tra il contenuto dell'elemento specifico e il suo bordo. Imbottitura orizzontale è lo spazio sul lato sinistro e destro dell'elemento, mentre imbottitura verticale è lo spazio nella parte superiore e inferiore di un elemento. Tailwind offre varie classi di utilità per aggiungere padding orizzontale o verticale agli elementi desiderati.
Questo articolo illustrerà:
Come aggiungere il riempimento orizzontale in Tailwind?
Per aggiungere il riempimento orizzontale a un elemento in Tailwind, la classe 'px-
Sintassi
< elemento classe = 'px-0...' > ... elemento >
Qui 'px' rappresenta l''asse x' o 'imbottitura orizzontale'.
Esempio: applicazione di spaziatura orizzontale a un elemento HTML
In questo esempio, useremo il ' px-20 ” classe di utilità con il “ Per aggiungere spaziatura verticale a un elemento in Tailwind, usa il ' py- Sintassi Esempio: applicazione del riempimento verticale a un elemento HTML In questo esempio, useremo il ' p-20 ” classe di utilità con il “ Per aggiungere il padding orizzontale e verticale in Tailwind, il ' px-
< corpo >
< div classe = 'bg-rosa-600 px-20 w-max' >
Imbottitura In CSS vento in coda
div >
corpo >
Produzione
L'output sopra mostra il riempimento sui lati sinistro e destro del contenitore. Ciò indica che il riempimento orizzontale è stato applicato correttamente all'elemento contenitore. Come aggiungere il riempimento verticale in Tailwind?
Qui 'py' rappresenta l''asse y' o 'imbottitura verticale'.
< div classe = 'bg-rosa-600 py-20 w-max' >
Imbottitura In CSS vento in coda
div >
corpo >
Produzione
L'output sopra mostra il riempimento sui lati superiore e inferiore del contenitore. Ciò indica che la spaziatura interna verticale è stata effettivamente applicata all'elemento contenitore. Conclusione