Questo blog fornirà un'idea su come assegnare lo stesso spazio tra più elementi in Tailwind.
Come assegnare lo stesso spazio tra più elementi in Tailwind?
Gli utenti possono assegnare spazi uguali tra gli elementi utilizzando il comando ' spazio-{x/y}-{dimensione} 'classe di utilità. Gli utenti possono aggiungere spazio sull'asse xo y specificando un valore intero. L'utilità di spaziatura è necessaria perché rende attraente la pagina web. Se una pagina web non ha una spaziatura adeguata tra gli elementi, non attirerà gli utenti.
Prendiamo un esempio di codice per assegnare lo stesso spazio tra gli elementi della griglia.
Metodo 1: assegnazione dello spazio sull'asse X.
Uno spazio uguale assegnato sull'asse x crea una spaziatura uguale a destra e a sinistra dell'elemento. Per assegnare lo spazio sull'asse x utilizzare la seguente sintassi:
spazio - X - { misurare }
La dimensione può essere qualsiasi valore intero.
Considera il codice seguente per assegnare uguale spazio sull'asse x:
< corpo >< div classe = 'mx-4 griglia griglia-cols-4 spazio-x-4' >
< div classe = 'bg-verde-400 h-16 arrotondato-lg bordo-2 bordo-verde-800' > 1 div >
< div classe = 'bg-verde-400 h-16 arrotondato-lg bordo-2 bordo-verde-800' > 2 div >
< div classe = 'bg-verde-400 h-16 arrotondato-lg bordo-2 bordo-verde-800' > 3 div >
< div classe = 'bg-verde-400 h-16 arrotondato-lg bordo-2 bordo-verde-800' > 4 div >
div >
corpo >
In questo codice:
- “ mx-4 ' aggiunge un margine di 4 px sull'asse x (destro e sinistro).
- IL ' griglia La classe crea una griglia.
- IL ' griglia-cols-4 'crea 4 colonne nella griglia.
- IL ' spazio-x-4 ' aggiunge uno spazio di 4px tra gli elementi della griglia.
- “ bg-verde-400 ” imposta il colore di sfondo su verde.
- “ h-16 ' imposta l'altezza su 16px.
- IL ' arrotondato-lg ' Rende l'angolo arrotondato e il raggio del bordo è ampio.
- IL ' confine-2 ' crea un bordo di 2px attorno all'elemento.
- “ bordo-verde-800 ” rende il bordo verde scuro.
Produzione
Visualizza l'anteprima dell'output creato dal codice sopra:
Si può vedere che tra gli elementi è assegnata una spaziatura di 4px.
Metodo 2: assegnazione dello spazio sull'asse y.
La spaziatura può essere assegnata sull'asse y in modo simile al metodo precedente, apportando piccole modifiche al codice precedente. Assegna gli spazi lungo l'asse y (in alto e in basso). La sintassi è:
Il codice seguente può essere implementato per aggiungere spazi lungo l'asse y:
< corpo >< div classe = 'mx-4 mio-4 spazio-y-4' >
< div classe = 'bg-verde-400 h-16 arrotondato-lg bordo-2 bordo-verde-800' > 1 div >
< div classe = 'bg-verde-400 h-16 arrotondato-lg bordo-2 bordo-verde-800' > 2 div >
< div classe = 'bg-verde-400 h-16 arrotondato-lg bordo-2 bordo-verde-800' > 3 div >
< div classe = 'bg-verde-400 h-16 arrotondato-lg bordo-2 bordo-verde-800' > 4 div >
div >
corpo >
In questo codice:
- “ mx-4 ' aggiunge un margine di 4px a sinistra e a destra degli elementi per rendere l'output più ottimizzato.
- “ mio-4 'aggiunge un margine di 4px sull'asse y (superiore e inferiore).
- “ spazio-y-4 'aggiunge spazio di 4px sull'asse y (in alto e in basso).
Produzione
Salva il codice sopra e visualizza l'anteprima della pagina web creata da esso per vedere la spaziatura come:
Si tratta di assegnare uguale spazio tra gli elementi.
Conclusione
Per assegnare lo stesso spazio tra più elementi in Tailwind, gli utenti possono utilizzare il comando ' spazio-{x/y}-{dimensione} 'classe di utilità e specificare un valore intero come dimensione in base al requisito. La spaziatura uguale tra gli elementi rende l'output più scalabile e gli spettatori rimangono coinvolti nella pagina web. Questo post ha fornito il metodo per assegnare lo stesso spazio tra più elementi in Tailwind.