Kuidas lisada taganttuules elementide vahele horisontaalset ja vertikaalset ruumi?

Kuidas Lisada Taganttuules Elementide Vahele Horisontaalset Ja Vertikaalset Ruumi



Tailwind CSS pakub ruumi vahel ” utiliidid, et juhtida ruumi painduvate või võrekonteinerite vahel. Sellel on erinevad klassid, nagu 'space-x-', 'space-y-', 'space-x-reverse', 'space-y-reverse' jne. Need utiliidid lisavad horisontaalseid ja vertikaalne ruum mahuti painduvate või võreelementide vahel.

Horisontaalne ruum on ruum piki x-telge painduva või ruudustiku konteineri alamelementide vahel, kui need on paigutatud ritta. Vertikaalne ruum on ruum piki y-telge painduva või ruudustiku konteineri alamelementide vahel, kui need on paigutatud veergu.

See artikkel demonstreerib:





Kuidas lisada taganttuules elementide vahele horisontaalset ruumi?

Tailwindis elementide vahele horisontaalse ruumi lisamiseks tühik-x- ” klassi kasutatakse koos soovitud elemendiga HTML-programmis. See klass lisab x-telje elementide vahele ruumi.



Süntaks



klass = 'tühik-x- ...'>... < / element>

Siin tähistab 'x' 'x-telge' või 'horisontaalset ruumi'. Asendage '' mis tahes kehtiva väärtusega, näiteks '4', '10' jne.



Näide: Horisontaalse ruumi rakendamine elementide vahel taganttuules

Selles näites on meil painduv konteiner mõne alamelemendiga. Me kasutame ' tühik-x-8 ' kasuliku klass koos '

” element, et lisada selle alamelementide vahele horisontaalset tühikut:



< keha >

< div klass = 'flex space-x-8 m-10 h-20 w-max' >

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

< / div >

< / keha >

Siin, emaelemendis

:

  • “ painduv ” klass loob paindliku paigutuse.
  • “ tühik-x-8 ” klass lisab mahutis painduvate elementide vahele 8 ühikut horisontaalset vahekaugust.
  • “ m-10 ” klass lisab konteineri kõikidele külgedele 10 ühiku suuruse varu.
  • “ h-20 ” klass määrab konteineri kõrguseks 20 ühikut.
  • “ w-max ” klass määrab konteineri laiuseks selle maksimaalse sisulaiuse.

Alamelementides

:

  • “ bg-teal-500 ” klass seab flex-elementide tausta sinakaspruuniks.
  • “ w-20 ” klass määrab iga painduva elemendi laiuseks 20 ühikut.
  • “ p-5 ” klass lisab iga painduva eseme kõikidele külgedele 5 ühikut polsterdust.

Väljund

Ülaltoodud väljund näitab, et horisontaalne ruum paindeelemendi vahel on edukalt rakendatud.

Kuidas lisada taganttuules elementide vahele vertikaalset ruumi?

Tailwindis elementide vahele vertikaalse ruumi lisamiseks tühik-y- ” klassi kasutatakse konkreetse elemendiga HTML-programmis. See klass lisab y-telje elementide vahele ruumi.

Süntaks

klass = 'tühik-y- ...' >...< / element>

Siin tähistab 'y' 'y-telge' või 'vertikaalset ruumi'. Asendage '' mis tahes tegeliku väärtusega, näiteks '5', '12' jne.

Näide: Vertikaalse ruumi rakendamine elementide vahel taganttuules

Selles näites on meil painduv konteiner, mille veerus on mõned alamelemendid. Me kasutame ' tühik-y-5 ' kasuliku klass koos '

” element, et lisada selle alamelementide vahele vertikaalset tühikut:

< keha >

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

< / keha >

Siin:

  • “ painduv ” klass loob paindliku paigutuse.
  • “ flex-col ” klass joondab painduvad üksused vertikaalsuunas (veerus).
  • “ tühik-y-5 ” klass lisab mahutis painduvate elementide vahele 5 ühikut vertikaalset vahekaugust.
  • “ m-10 ” klass lisab konteineri kõikidele külgedele 10 ühiku suuruse varu.
  • “ tekstikeskus ” klass joondab konteineri teksti keskele.

Väljund

Paindlike elementide vaheline vertikaalne ruum on tõhusalt rakendatud.

Järeldus

Tailwindis elementide vahele horisontaalse ja vertikaalse ruumi lisamiseks tühik-x- ” ja „ tühik-y- ” utiliidiklasse kasutatakse vastavalt soovitud elementidega HTML-programmis. Neid klasse kasutatakse tavaliselt koos painduvate ja võrekonteineritega, et juhtida nende alamelementide vahelist ruumi. See artikkel on näide sellest, kuidas rakendada Tailwindis elementide vahel horisontaalset ja vertikaalset ruumi.

muud

Kategooria

Lemmik Postitused

Jada lähtestamine PostgreSQL-is

Struktuuride sidumine C++ keeles

Kuidas kujundada pealkirju, kasutades Tailwindis põhistiili?

Kuidas saada Javas praegust ajatemplit

Mis on MacOS-is Zsh käivitamise käsk

Kuidas WhatsAppis sõnumile meeldida?

Kuidas näidata töötavaid MySQL-i protsesse

Kuidas käivitada mitu käsku samas Croni töös

Installige Kali Linux Androidi

Kuidas alla laadida ja installida Realteki kõrglahutusega helidraiveri Windows 11?

Kuidas lubada või keelata MS Wordi tumedat režiimi

Kuidas hankida Giti kaughoidlast uusima kohustuse SHA?

ADB käsku ei leitud

Kuidas lahendada Linuxis viga 'Chown Operation Not Permitted'.

Mis on failihaldus C-programmeerimises?

Kuidas protsess Argv Node.js-is töötab?

Kuidas leida objekti ID järgi JavaScripti objektide massiivist

Shuffle() vs random_shuffle() keeles C++

Kuidas iPhone'i välja lülitada – samm-sammult juhend

ESP32 reaalajas kell (RTC), kasutades DS1307 ja OLED-ekraani