Kako dodati vodoravni in navpični razmik med elementi v zadnjem vetru?

Kako Dodati Vodoravni In Navpicni Razmik Med Elementi V Zadnjem Vetru



Tailwind CSS zagotavlja ' prostor med ” pripomočke za nadzor prostora med elementi vsebnika flex ali grid. Ima različne razrede, kot so »space-x-«, »space-y-«, »space-x-reverse«, »space-y-reverse« itd. Ti pripomočki dodajo horizontalne in navpični prostor med flex ali rešetkastimi elementi v posodi.

Horizontalni prostor je prostor vzdolž osi x med podrejenimi elementi upogljivega ali mrežnega vsebnika, ko so razporejeni v vrsti. Vertikalni prostor je prostor vzdolž osi y med podrejenimi elementi vsebnika flex ali mreže, ko so razporejeni v stolpec.

Ta članek bo pokazal:





Kako dodati vodoravni prostor med elementi v zadnjem vetru?

Če želite dodati vodoravni presledek med elementi v Tailwindu, uporabite » presledek-x- ” se uporablja z želenim elementom v programu HTML. Ta razred doda prostor med elementi vzdolž osi x.



Sintaksa



razred = 'presledek-x- ...'>... < / element>

Tukaj 'x' predstavlja 'os x' ali 'vodoravni prostor'. Prepričajte se, da zamenjate »« s katero koli veljavno vrednostjo, kot je »4«, »10« itd.



Primer: uporaba vodoravnega razmika med elementi v hrbtnem vetru

V tem primeru imamo flex vsebnik z nekaj podrejenimi elementi. Uporabili bomo ' presledek-x-8 ' razred uporabnosti z '

” za dodajanje vodoravnega prostora med njegove podrejene elemente:



< telo >

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

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

< / div >

< / telo >

Tukaj, v nadrejenem elementu

:

  • “ flex ” razred ustvari prilagodljivo postavitev.
  • “ presledek-x-8 ” doda 8 enot vodoravnega razmika med upogljivimi elementi znotraj vsebnika.
  • “ m-10 ” doda rob 10 enot na vse strani vsebnika.
  • “ h-20 ” nastavi višino vsebnika na 20 enot.
  • “ w-maks ” nastavi širino vsebnika na največjo širino vsebine.

V podrejenih elementih

:

  • “ bg-teal-500 ” nastavi ozadje elementov flex na temno modro.
  • “ w-20 ” nastavi širino vsakega elementa flex na 20 enot.
  • “ p-5 ” doda 5 enot oblazinjenja na vse strani vsakega upogljivega predmeta.

Izhod

Zgornji rezultat kaže, da je bil vodoravni prostor med elementom flex uspešno uporabljen.

Kako dodati navpični prostor med elementi v Tailwind?

Če želite dodati navpični presledek med elementi v Tailwindu, uporabite » presledek-y- ” se uporablja z določenim elementom v programu HTML. Ta razred doda prostor med elementi vzdolž osi y.

Sintaksa

razred = 'presledek-y- ...' >...< / element>

Tu 'y' predstavlja 'os y' ali 'navpični prostor'. Prepričajte se, da zamenjate “” s katero koli resnično vrednostjo, kot je “5”, “12” itd.

Primer: uporaba navpičnega razmika med elementi v zadnjem vetru

V tem primeru imamo vsebnik flex z nekaj podrejenimi elementi v stolpcu. Uporabili bomo ' prostor-y-5 ' razred uporabnosti z '

” za dodajanje navpičnega presledka med njegove podrejene elemente:

< telo >

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

< / telo >

Tukaj:

  • “ flex ” razred ustvari prilagodljivo postavitev.
  • “ flex-col ” poravna elemente flex v navpični smeri (v stolpcu).
  • “ prostor-y-5 ” doda 5 enot navpičnega razmika med upogljivimi elementi znotraj vsebnika.
  • “ m-10 ” doda rob 10 enot na vse strani vsebnika.
  • “ besedilno središče ” poravna besedilo vsebnika na sredino.

Izhod

Navpični prostor med upogljivimi elementi je bil učinkovito uporabljen.

Zaključek

Če želite dodati vodoravni in navpični presledek med elementi v Tailwindu, uporabite » presledek-x- « in » presledek-y- ” Razredi pripomočkov se uporabljajo z želenimi elementi v programu HTML oz. Ti razredi se običajno uporabljajo z vsebniki flex in grid za nadzor prostora med podrejenimi elementi. Ta članek je ponazoril metodo uporabe vodoravnega in navpičnega razmika med elementi v Tailwindu.

drugo

Kategorija

Priljubljene Objave

TypeError: object.forEach ni funkcija v JavaScriptu

Kako onemogočiti dogodek klikanja s CSS

Kako oblikovati modal Bootstrap

Kako zgraditi svojo lastno datoteko Docker, sliko in vsebnik

Spremenljivke in argumenti datoteke Makefile: obsežen vodnik

Operator SQL »Ni ničelno«.

Kako namestiti aplikacijo Rails v AWS

Funkcija Perl Bless

Kako inicializirati dolžino matrike v JavaScriptu

Avtor Git Commit: Kako to spremeniti?

background:none Vs background:transparent Kakšna je razlika?

Kako najti adjuint matrike v MATLAB?

Metoda Python String swapcase().

Kako namestiti Onedrive na Linux Mint 21

Kako delati s praznimi oznakami in oznakami vsebnika v HTML

Kako spremeniti barvo besedilnega oblačka v sistemu Android

Kako urejati videoposnetke v iPhonu - osnovni vodnik

Kako nastaviti privzeto vrednost datuma vrste vnosa na danes?

Namestite pogon Windows NTFS v Linux

Kako poslati pošto prek ukaza Curl na Raspberry Pi