Kaip pridėti horizontalų ir vertikalią erdvę tarp elementų „Tailwind“?

Kaip Prideti Horizontalu Ir Vertikalia Erdve Tarp Elementu Tailwind



Tailwind CSS suteikia „ tarpas tarp “ komunalinės paslaugos, skirtos valdyti tarpą tarp lankstaus arba tinklelio konteinerio elementų. Jame yra įvairių klasių, tokių kaip „tarpas-x-“, „tarpas-y-“, „tarpas-x-atvirkštinis“, „tarpas-y-atvirkštinis“ ir tt Šios priemonės prideda horizontalias ir vertikalus tarpas tarp lanksčių arba tinklelio elementų konteineryje.

Horizontali erdvė yra tarpas išilgai x ašies tarp antrinių lanksčios arba tinklelio talpyklos elementų, kai jie yra išdėstyti iš eilės. Vertikali erdvė yra tarpas išilgai y ašies tarp antrinių lanksčios arba tinklelio talpyklos elementų, kai jie yra išdėstyti stulpelyje.

Šis straipsnis parodys:



Kaip pridėti horizontalią erdvę tarp elementų „Tailwind“?

Norėdami pridėti horizontalų tarpą tarp „Tailwind“ elementų, „ tarpas-x- ” klasė naudojama su norimu elementu HTML programoje. Ši klasė prideda tarpą tarp elementų išilgai x ašies.



Sintaksė



klasė = 'tarpas-x- ...'>... < / elementas>

Čia „x“ reiškia „x ašį“ arba „horizontalią erdvę“. Būtinai pakeiskite „“ bet kokia tinkama reikšme, pvz., „4“, „10“ ir kt.



Pavyzdys: Horizontalios erdvės tarp elementų taikymas galinio vėjo režimu

Šiame pavyzdyje turime lankstų konteinerį su kai kuriais antriniais elementais. Mes naudosime ' erdvė-x-8 'naudingumo klasė su '

“ elementą, kad pridėtumėte horizontalų tarpą tarp antrinių elementų:



< kūnas >

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

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

< / div >

< / kūnas >

Čia, pirminiame

elemente:

  • “ lankstus “ klasė sukuria lankstų išdėstymą.
  • “ erdvė-x-8 “ klasė prideda 8 vienetus horizontalaus atstumo tarp lanksčių elementų konteineryje.
  • “ m-10 ” klasė prideda 10 vienetų paraštę visose konteinerio pusėse.
  • “ h-20 ” klasė nustato konteinerio aukštį iki 20 vnt.
  • “ w-maks “ klasė nustato konteinerio plotį iki didžiausio turinio pločio.

Vaikų

elementuose:

  • “ bg-teal-500 “ klasė nustato flex elementų foną į mėlyną.
  • “ w-20 ” klasė nustato kiekvieno lankstaus elemento plotį iki 20 vienetų.
  • “ p-5 ” klasė prideda 5 vienetus paminkštinimo į visas kiekvieno lankstaus elemento puses.

Išvestis

Aukščiau pateikta išvestis rodo, kad horizontalus tarpas tarp lankstaus elemento buvo sėkmingai pritaikytas.

Kaip pridėti vertikalią erdvę tarp elementų „Tailwind“?

Norėdami pridėti vertikalų tarpą tarp „Tailwind“ elementų, „ tarpas-y- “ klasė naudojama su konkrečiu elementu HTML programoje. Ši klasė prideda tarpą tarp elementų išilgai y ašies.

Sintaksė

klasė = 'tarpas-y-...' >...< / elementas>

Čia „y“ reiškia „y ašį“ arba „vertikalią erdvę“. Būtinai pakeiskite „“ bet kokia tikra reikšme, pvz., „5“, „12“ ir kt.

Pavyzdys: vertikalios erdvės taikymas tarp elementų tailwind

Šiame pavyzdyje turime lankstų konteinerį su kai kuriais antriniais elementais stulpelyje. Mes naudosime ' erdvė-y-5 'naudingumo klasė su '

“ elementą, kad pridėtumėte vertikalią tarpą tarp antrinių elementų:

< kūnas >

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

< / kūnas >

Čia:

  • “ lankstus “ klasė sukuria lankstų išdėstymą.
  • “ flex-col ” klasė sulygiuoja lanksčiuosius elementus vertikalia kryptimi (stulpelyje).
  • “ erdvė-y-5 “ klasė prideda 5 vertikalaus atstumo vienetus tarp lanksčių elementų konteineryje.
  • “ m-10 ” klasė prideda 10 vienetų paraštę visose konteinerio pusėse.
  • “ teksto centras “ klasė sulygiuoja konteinerio tekstą centre.

Išvestis

Vertikalus tarpas tarp lanksčių elementų pritaikytas efektyviai.

Išvada

Norėdami pridėti horizontalų ir vertikalų tarpą tarp „Tailwind“ elementų, „ tarpas-x- “ ir „ tarpas-y- ” naudingumo klasės atitinkamai naudojamos su norimais elementais HTML programoje. Šios klasės paprastai naudojamos su lanksčiais ir tinklelio konteineriais, kad būtų galima valdyti erdvę tarp antrinių elementų. Šiame straipsnyje parodytas horizontalios ir vertikalios erdvės tarp Tailwind elementų taikymo metodas.

Kita

Kategorija

Populiarios Temos

Kaip įdiegti „Resolvconf“ „Debian 12“.

Kaip nustatyti „Kali Linux“ „VirtualBox“?

Kaip patvirtinti PIN kodą ir mobiliojo telefono numerį „JavaScript“.

Redis EXPIRE maišos raktas

ESP32 NTP klientas-serveris: Gaukite datą ir laiką – Arduino IDE

Kaip PowerShell veikia komanda „Get-Process“.

Kaip apskaičiuoti kondensatoriaus dydį

Kaip pasirinkti atsitiktines eilutes iš matricos MATLAB?

Koks yra „Java“ sąrašo filtravimo procesas

Turiu naują pranešimą, kuris „Roblox“ neišnyks – kaip pataisyti

Kubectl automatinio mastelio komanda

Arduino ryšio protokolas

Paverskite Raspberry Pi į kriptovaliutų prekybos robotą naudodami pycryptobot

Kaip pataisyti „Xbox“ programą, kuri neatsidaro „Windows 10“.

Kaip naudoti diapazoną, pagrįstą ciklu C++

Kaip ištaisyti MATLAB klaidą „Matricos indeksas nepatenka į ištrynimo diapazoną“.

Ką „onmouseover“ įvykis veikia „JavaScript“.

Patikrinkite, ar objektas nėra „JavaScript“ klasės egzempliorius

PIR jutiklis HC-SR501 Arduino Nano pamoka – žingsnis po žingsnio instrukcija

Arduino laikmačio biblioteka delsimui