Cum să adăugați spațiu orizontal și vertical între elemente în Tailwind?

Cum Sa Adaugati Spatiu Orizontal Si Vertical Intre Elemente In Tailwind



Tailwind CSS oferă „ spatiu intre ” utilități pentru a controla spațiul dintre elementele containerului flex sau grid. Are diverse clase, cum ar fi „space-x-”, „space-y-”, „space-x-reverse”, „space-y-reverse”, etc. Aceste utilitare adaugă orizontală și spațiu vertical între elementele flexibile sau grilă din container.

Spațiu orizontal este un spațiu de-a lungul axei x dintre elementele copil ale unui container flexibil sau grilă atunci când sunt aranjate într-un rând. Spațiu vertical este un spațiu de-a lungul axei y între elementele copil ale unui container flexibil sau grilă atunci când sunt aranjate într-o coloană.

Acest articol va demonstra:





Cum să adăugați spațiu orizontal între elemente în Tailwind?

Pentru a adăuga spațiu orizontal între elemente în Tailwind, „ spațiu-x- ” se folosește cu elementul dorit în programul HTML. Această clasă adaugă spațiu între elemente de-a lungul axei x.



Sintaxă



clasă = „spațiu-x- ...'>... < / element>

Aici, „x” reprezintă „axa x” sau „spațiul orizontal”. Asigurați-vă că înlocuiți „” cu orice valoare validă, cum ar fi „4”, „10” etc.



Exemplu: aplicarea spațiului orizontal între elemente în Tailwind

În acest exemplu, avem un container flexibil cu câteva elemente copil. Vom folosi „ spațiu-x-8 ” clasa de utilitate cu “

” element pentru a adăuga spațiu orizontal între elementele sale secundare:



< corp >

< div clasă = „flex space-x-8 m-10 h-20 w-max” >

< div clasă = „bg-teal-500 w-20 p-5” > 1 < / div >
< div clasă = „bg-teal-500 w-20 p-5” > 2 < / div >
< div clasă = „bg-teal-500 w-20 p-5” > 3 < / div >
< div clasă = „bg-teal-500 w-20 p-5” > 4 < / div >
< div clasă = „bg-teal-500 w-20 p-5” > 5 < / div >
< div clasă = „bg-teal-500 w-20 p-5” > 6 < / div >

< / div >

< / corp >

Aici, în elementul părinte

:

  • „ contracta ” clasa creează un aspect flexibil.
  • „ spațiu-x-8 ” clasa adaugă 8 unități de distanță orizontală între elementele flexibile dintr-un container.
  • „ m-10 ” clasa adaugă o marjă de 10 unități pe toate părțile containerului.
  • „ h-20 ” clasa setează înălțimea containerului la 20 de unități.
  • „ w-max ” clasa setează lățimea containerului la lățimea maximă a conținutului.

În elementele

copil:

  • „ bg-teal-500 ” clasa setează fundalul elementelor flexibile la ceai.
  • „ w-20 ” clasa setează lățimea fiecărui element flexibil la 20 de unități.
  • „ p-5 ” clasa adaugă 5 unități de umplutură pe toate părțile fiecărui articol flexibil.

Ieșire

Rezultatul de mai sus indică faptul că spațiul orizontal dintre elementul flexibil a fost aplicat cu succes.

Cum să adăugați spațiu vertical între elemente în Tailwind?

Pentru a adăuga spațiu vertical între elemente în Tailwind, „ spațiu-y- ” este folosită cu elementul specific din programul HTML. Această clasă adaugă spațiu între elemente de-a lungul axei y.

Sintaxă

clasă = 'spațiu-y- ...' >...< / element>

Aici, „y” reprezintă „axa y” sau „spațiul vertical”. Asigurați-vă că înlocuiți „” cu orice valoare reală, cum ar fi „5”, „12” etc.

Exemplu: aplicarea spațiului vertical între elemente în Tailwind

În acest exemplu, avem un container flexibil cu câteva elemente copil într-o coloană. Vom folosi „ spațiu-y-5 ” clasa de utilitate cu “

” element pentru a adăuga spațiu vertical între elementele sale secundare:

< corp >

< div clasă = „flex flex-col space-y-5 m-10 text-center” >
< div clasă = „bg-teal-500 p-5” > 1 < / div >
< div clasă = „bg-teal-500 p-5” > 2 < / div >
< div clasă = „bg-teal-500 p-5” > 3 < / div >
< div clasă = „bg-teal-500 p-5” > 4 < / div >
< / div >

< / corp >

Aici:

  • „ contracta ” clasa creează un aspect flexibil.
  • „ flex-col ” clasa aliniază elementele flexibile într-o direcție verticală (într-o coloană).
  • „ spațiu-y-5 ” clasa adaugă 5 unități de distanță verticală între elementele flexibile dintr-un container.
  • „ m-10 ” clasa adaugă o marjă de 10 unități pe toate părțile containerului.
  • „ centru de text ” clasa aliniază textul containerului la centru.

Ieșire

Spațiul vertical dintre elementele flexibile a fost aplicat eficient.

Concluzie

Pentru a adăuga spațiul orizontal și vertical dintre elemente în Tailwind, „ spațiu-x- ' și ' spațiu-y- ” clasele de utilitate sunt folosite cu elementele dorite în programul HTML respectiv. Aceste clase sunt de obicei folosite cu containerele flex și grid pentru a controla spațiul dintre elementele lor copil. Acest articol a exemplificat metoda de aplicare a spațiului orizontal și vertical între elemente în Tailwind.

Alte

Categorie

Posturi Populare

Ce este AWS EBS? | Caracteristici și utilizare

[Remediere] Conectare PIN nu funcționează și Eroare 0x80090016 Setare PIN în Windows 10 - Winhelponline

Pentru Loop C++

Ce este Elasticsearch Aggregation?

Unde este Nu deranjați pe iPhone

Conversia PySpark DataFrame în JSON

Cum să activați modul Dumnezeu în Windows 11

Cum se instalează FireDM pe Raspberry Pi

Cum să adăugați un singur element la o matrice sau vector în MATLAB

Cum să încărcați firmware-ul MicroPython în ESP32 utilizând uPyCraft IDE

Cum să adăugați GitHub la Discord

Cum se instalează mediul de dezvoltare Rust pe Windows

Cum se poziționează static un element în DOM – Tailwind?

Logstash în Docker

Cum se instalează Apache Tomcat Server pe Ubuntu 22.04

Cum se utilizează „torch.no_grad” în PyTorch?

Cum să creați mai multe profiluri de conexiune NetworkManager pentru aceeași interfață de rețea pe Linux și să comutați între ele

Există vreo metodă pentru eliminarea valorilor „nedefinite” din matrice în JavaScript

Cum se utilizează funcția PHP date_sunrise() și date_sunset().

Cum se utilizează operația de extindere în PyTorch?