Come aggiungere spazio orizzontale e verticale tra gli elementi in Tailwind?

Come Aggiungere Spazio Orizzontale E Verticale Tra Gli Elementi In Tailwind



Tailwind CSS fornisce il ' spazio tra ” utilità per controllare lo spazio tra gli elementi del contenitore flex o grid. Ha varie classi, come “space-x-”, “space-y-”, “space-x-reverse”, “space-y-reverse”, ecc. Queste utilità aggiungono orizzontale e spazio verticale tra elementi flessibili o a griglia nel contenitore.

Spazio orizzontale è uno spazio lungo l'asse x tra gli elementi figlio di un contenitore Flex o Grid quando sono disposti in fila. Spazio verticale è uno spazio lungo l'asse y tra gli elementi figlio di un contenitore Flex o Grid quando sono disposti in una colonna.

Questo articolo dimostrerà:





Come aggiungere uno spazio orizzontale tra gli elementi in Tailwind?

Per aggiungere uno spazio orizzontale tra gli elementi in Tailwind, il ' spazio-x- ” viene utilizzata con l'elemento desiderato nel programma HTML. Questa classe aggiunge spazio tra gli elementi lungo l'asse x.



Sintassi



classe = 'spazio-x- ...'>... < / elemento>

Qui, 'x' rappresenta l''asse x' o 'spazio orizzontale'. Assicurati di sostituire '' con qualsiasi valore valido, come '4', '10' ecc.



Esempio: applicazione dello spazio orizzontale tra gli elementi in Tailwind

In questo esempio, abbiamo un contenitore flessibile con alcuni elementi figlio. Useremo il “ spazio-x-8 ” classe di utilità con il “

” per aggiungere uno spazio orizzontale tra i suoi elementi figli:



< corpo >

< div classe = 'flex space-x-8 mt-10 h-20 w-max' >

< div classe = 'bg-verde acqua-500 w-20 p-5' > 1 < / div >
< div classe = 'bg-verde acqua-500 w-20 p-5' > 2 < / div >
< div classe = 'bg-verde acqua-500 w-20 p-5' > 3 < / div >
< div classe = 'bg-verde acqua-500 w-20 p-5' > 4 < / div >
< div classe = 'bg-verde acqua-500 w-20 p-5' > 5 < / div >
< div classe = 'bg-verde acqua-500 w-20 p-5' > 6 < / div >

< / div >

< / corpo >

Qui, nell'elemento

genitore:

  • “ flettere ” class crea un layout flessibile.
  • “ spazio-x-8 La classe ” aggiunge 8 unità di spaziatura orizzontale tra gli elementi flessibili all'interno di un contenitore.
  • “ m-10 La classe aggiunge un margine di 10 unità su tutti i lati del contenitore.
  • “ h-20 ” class imposta l'altezza del contenitore su 20 unità.
  • “ w-max La classe ” imposta la larghezza del contenitore sulla larghezza massima del contenuto.

Negli elementi figlio

:

  • “ bg-verde acqua-500 ” class imposta lo sfondo degli elementi flex su verde acqua.
  • “ w-20 ” class imposta la larghezza di ciascun elemento flessibile su 20 unità.
  • “ p-5 La classe ” aggiunge 5 unità di imbottitura a tutti i lati di ciascun elemento flessibile.

Produzione

L'output precedente indica che lo spazio orizzontale tra l'elemento flessibile è stato applicato correttamente.

Come aggiungere spazio verticale tra gli elementi in Tailwind?

Per aggiungere uno spazio verticale tra gli elementi in Tailwind, il ' spazio-y- ” viene utilizzata con l'elemento specifico nel programma HTML. Questa classe aggiunge spazio tra gli elementi lungo l'asse y.

Sintassi

classe = 'spazio-y- ...' >...< / elemento>

Qui, 'y' rappresenta l''asse y' o 'spazio verticale'. Assicurati di sostituire '' con qualsiasi valore reale, come '5', '12' ecc.

Esempio: applicazione dello spazio verticale tra gli elementi in Tailwind

In questo esempio, abbiamo un contenitore flessibile con alcuni elementi figlio in una colonna. Useremo il “ spazio-y-5 ” classe di utilità con il “

” per aggiungere uno spazio verticale tra i suoi elementi figli:

< corpo >

< div classe = 'flex flex-col space-y-5 m-10 text-center' >
< div classe = 'bg-verde acqua-500 p-5' > 1 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 2 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 3 < / div >
< div classe = 'bg-verde acqua-500 p-5' > 4 < / div >
< / div >

< / corpo >

Qui:

  • “ flettere ” class crea un layout flessibile.
  • “ flex col La classe ” allinea gli elementi flessibili in direzione verticale (in una colonna).
  • “ spazio-y-5 La classe ” aggiunge 5 unità di spaziatura verticale tra gli elementi flessibili all'interno di un contenitore.
  • “ m-10 La classe aggiunge un margine di 10 unità su tutti i lati del contenitore.
  • “ centro del testo La classe ” allinea il testo del contenitore al centro.

Produzione

Lo spazio verticale tra gli elementi flessibili è stato applicato in modo efficiente.

Conclusione

Per aggiungere lo spazio orizzontale e verticale tra gli elementi in Tailwind, il ' spazio-x- ' E ' spazio-y- Le classi di utilità vengono utilizzate rispettivamente con gli elementi desiderati nel programma HTML. Queste classi vengono solitamente utilizzate con contenitori flex e grid per controllare lo spazio tra i loro elementi figli. Questo articolo ha esemplificato il metodo di applicazione dello spazio orizzontale e verticale tra gli elementi in Tailwind.

Altro

Categoria

Messaggi Popolari

Come accedere tramite SSH all'istanza EC2

Come posso mostrare cosa ha fatto un commit?

Come rimborsare l'acquisto di un regalo Nitro su Discord?

Rust Std::OS in Linux

Redis MGET

Come lasciare i timeout alle spalle in Node.js?

Ottieni un numero di colonne in R DataFrame

Array.findIndex() in ES6

Come gestire le impostazioni di riproduzione automatica di Windows?

Funzione Serial.readBytesUntil() nella programmazione Arduino

Come utilizzare i punti di interruzione e le query multimediali su 'clear' in Tailwind?

Come configurare gli IP esterni del servizio di negazione in Kubernetes

Come aggiornare il kernel su Debian

Cosa fa I2C in ESP32?

Come risolvere il problema del 'Rifiuto di unire storie non correlate' in Git?

Come installare Resolvconf su Debian 12

10 modi per rendere più veloce il tuo laptop HP

Come utilizzare il comando Rsync in Linux

Come funziona l'istruzione CREATE DATABASE in MySQL

Come eseguire la classificazione del testo utilizzando i trasformatori