Come aggiungere il riempimento orizzontale e verticale in Tailwind?

Come Aggiungere Il Riempimento Orizzontale E Verticale In Tailwind



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-' viene utilizzata con l'elemento desiderato nel programma HTML. Gli utenti possono specificare valori diversi per la dimensione del riempimento. Questa classe aggiunge padding lungo l'asse x, cioè sia sul lato sinistro che su quello destro dell'elemento.



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 “

” elemento per aggiungere spaziatura orizzontale ad esso:



< 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?

Per aggiungere spaziatura verticale a un elemento in Tailwind, usa il ' py- ” classe di utilità con l'elemento specifico nel programma HTML. Questa classe aggiunge il riempimento lungo l'asse y, ad esempio sia sul lato superiore che su quello inferiore dell'elemento.

Sintassi

< elemento classe = 'py-0...' > ... elemento >


Qui 'py' rappresenta l''asse y' o 'imbottitura verticale'.

Esempio: applicazione del riempimento verticale a un elemento HTML

In questo esempio, useremo il ' p-20 ” classe di utilità con il “

” elemento per aggiungere spaziatura verticale ad esso:

< corpo >

< 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

Per aggiungere il padding orizzontale e verticale in Tailwind, il ' px- ' E ' py- Le classi di utilità vengono utilizzate rispettivamente con gli elementi desiderati nel programma HTML. Gli utenti possono specificare valori diversi per applicare il riempimento a sinistra ea destra o in alto e in basso di un elemento. Questo articolo ha illustrato il metodo completo per applicare il padding orizzontale e verticale in Tailwind.