Kako dodati vodoravni i okomiti razmak između elemenata u Tailwindu?

Kako Dodati Vodoravni I Okomiti Razmak Izmedu Elemenata U Tailwindu



Tailwind CSS pruža ' razmak između ” pomoćni programi za kontrolu prostora između elemenata fleksibilnog ili rešetkastog spremnika. Ima različite klase, kao što su “razmak-x-”, “razmak-y-”, “razmak-x-obrnuto”, “razmak-y-obrnuto”, itd. Ovi uslužni programi dodaju horizontalne i vertikalni prostor između savitljivih ili rešetkastih elemenata u spremniku.

Horizontalni prostor je prostor duž x-osi između podređenih elemenata flex ili grid spremnika kada su poredani u nizu. Vertikalni prostor je prostor duž y-osi između podređenih elemenata flex ili grid spremnika kada su raspoređeni u stupac.

Ovaj će članak pokazati:





Kako dodati vodoravni razmak između elemenata u Tailwind?

Za dodavanje horizontalnog razmaka između elemenata u Tailwindu, ' razmak-x- ” klasa se koristi sa željenim elementom u HTML programu. Ova klasa dodaje razmak između elemenata duž x-osi.



Sintaksa



razreda = 'razmak-x- ...'>... < / element>

Ovdje 'x' predstavlja 'x-os' ili 'horizontalni prostor'. Svakako zamijenite “” bilo kojom valjanom vrijednošću, kao što je “4”, “10” itd.



Primjer: Primjena vodoravnog razmaka između elemenata u stražnjem vjetru

U ovom primjeru imamo fleksibilni spremnik s nekim podređenim elementima. Koristit ćemo ' razmak-x-8 ' klasa korisnosti s '

” za dodavanje horizontalnog razmaka između njegovih podređenih elemenata:



< tijelo >

< div razreda = 'fleksibilni prostor-x-8 m-10 h-20 w-max' >

< div razreda = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div razreda = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div razreda = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div razreda = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div razreda = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div razreda = 'bg-teal-500 w-20 p-5' > 6 < / div >

< / div >

< / tijelo >

Ovdje, u nadređenom

elementu:

  • “ savijati ” klasa stvara fleksibilan izgled.
  • “ razmak-x-8 ” klasa dodaje 8 jedinica vodoravnog razmaka između savitljivih elemenata unutar spremnika.
  • “ m-10 ” klasa dodaje marginu od 10 jedinica na sve strane spremnika.
  • “ h-20 ” klasa postavlja visinu spremnika na 20 jedinica.
  • “ w-maks ” postavlja širinu spremnika na najveću širinu sadržaja.

U podređenim

elementima:

  • “ bg-teal-500 ” klasa postavlja pozadinu savitljivih elemenata na tamnoplavu.
  • “ w-20 ” klasa postavlja širinu svake fleksibilne stavke na 20 jedinica.
  • “ p-5 ” klasa dodaje 5 jedinica podloge na sve strane svake fleksibilne stavke.

Izlaz

Gornji rezultat pokazuje da je vodoravni razmak između savitljivog elementa uspješno primijenjen.

Kako dodati vertikalni razmak između elemenata u Tailwind?

Za dodavanje okomitog razmaka između elemenata u Tailwindu, ' razmak-y- ” klasa se koristi s određenim elementom u HTML programu. Ova klasa dodaje razmak između elemenata duž y-osi.

Sintaksa

razreda = 'razmak-y- ...' >...< / element>

Ovdje 'y' predstavlja 'y-os' ili 'vertikalni prostor'. Svakako zamijenite “” bilo kojom stvarnom vrijednošću, kao što je “5”, “12” itd.

Primjer: Primjena okomitog razmaka između elemenata u stražnjem vjetru

U ovom primjeru imamo fleksibilni spremnik s nekim podređenim elementima u stupcu. Koristit ćemo ' prostor-y-5 ' klasa korisnosti s '

” za dodavanje okomitog razmaka između njegovih podređenih elemenata:

< tijelo >

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

< / tijelo >

Ovdje:

  • “ savijati ” klasa stvara fleksibilan izgled.
  • “ savitljiva boja ” klasa poravnava flex stavke u okomitom smjeru (u stupcu).
  • “ prostor-y-5 ” klasa dodaje 5 jedinica okomitog razmaka između savitljivih elemenata unutar spremnika.
  • “ m-10 ” klasa dodaje marginu od 10 jedinica na sve strane spremnika.
  • “ tekst-centar ” klasa poravnava tekst spremnika prema sredini.

Izlaz

Okomiti prostor između savitljivih elemenata primijenjen je učinkovito.

Zaključak

Za dodavanje vodoravnog i okomitog razmaka između elemenata u Tailwindu, ' razmak-x- ' i ' razmak-y- ” klase korisnih programa koriste se sa željenim elementima u HTML programu. Ove se klase obično koriste s fleksibilnim i mrežnim spremnicima za kontrolu prostora između njihovih podređenih elemenata. Ovaj je članak pokazao primjer metode primjene vodoravnog i okomitog razmaka između elemenata u Tailwindu.

ostalo

Kategorija

Popularni Postovi

Kako onemogućiti niti na Discordu Mobile?

Kako daljinski pristupiti Raspberry Pi na Macu

Kako prebrojati elemente koristeći console.count() u Node.js?

Kako napisati simbol veće od ili jednako u LaTeX-u

Kako koristiti proporcionalne i tablične figure u Tailwindu?

Što je klasa i objekt u Golangu?

Zašto je moj ping tako visok u Robloxu

Objasnite metode jQuery append() i JavaScript appendChild().

Funkcija MySQL INSTR().

Popravak: WiFi se automatski zaustavio - Intel AC 9560 kod 10 pogreške u sustavu Windows

Pande čitaju tekstualnu datoteku

Kako generirati SSH ključ u sustavu Windows 11

Kako koristiti funkciju arsort() u PHP-u

Kako promijeniti raspored fotografija u albumima na Android telefonu

Kako prenijeti podatke putem Bluetootha na Raspberry Pi

Kako implementirati ReAct logiku pomoću agenta u LangChainu?

Kako promijeniti izvor iframea u JavaScriptu?

Kako Readline emitKeypressEvents() radi u Node.js?

Što W Metacharacter radi u RegExp-u JavaScripta

Kako instalirati BabyAGI