Paano Magdagdag ng Horizontal at Vertical Space sa Pagitan ng Mga Elemento sa Tailwind?

Paano Magdagdag Ng Horizontal At Vertical Space Sa Pagitan Ng Mga Elemento Sa Tailwind



Ang Tailwind CSS ay nagbibigay ng “ espasyo sa pagitan ” mga utility upang kontrolin ang espasyo sa pagitan ng mga elemento ng flex o grid container. Mayroon itong iba't ibang klase, gaya ng 'space-x-', 'space-y-', 'space-x-reverse', 'space-y-reverse', atbp. Ang mga utility na ito ay nagdaragdag ng pahalang at patayong espasyo sa pagitan ng mga elemento ng flex o grid sa lalagyan.

Pahalang na espasyo ay isang puwang sa kahabaan ng x-axis sa pagitan ng mga elemento ng bata ng isang flex o grid na lalagyan kapag ang mga ito ay nakaayos sa isang hilera. Patayong espasyo ay isang puwang sa kahabaan ng y-axis sa pagitan ng mga elemento ng bata ng isang flex o grid na lalagyan kapag ang mga ito ay nakaayos sa isang column.

Ipapakita ng artikulong ito ang:





Paano Magdagdag ng Pahalang na Space sa Pagitan ng Mga Elemento sa Tailwind?

Upang magdagdag ng pahalang na espasyo sa pagitan ng mga elemento sa Tailwind, ang ' space-x- Ang klase ng ” ay ginagamit kasama ang gustong elemento sa HTML program. Ang klase na ito ay nagdaragdag ng espasyo sa pagitan ng mga elemento kasama ang x-axis.



Syntax



klase = 'space-x- ...'>... < / elemento>

Dito, kinakatawan ng 'x' ang 'x-axis' o 'horizontal space'. Tiyaking palitan ang “” ng anumang wastong halaga, gaya ng “4”, “10” atbp.



Halimbawa: Paglalapat ng Pahalang na Puwang sa Pagitan ng mga Elemento sa Tailwind

Sa halimbawang ito, mayroon kaming flex container na may ilang elemento ng bata. Gagamitin natin ang ' espasyo-x-8 ' utility class na may '

” elemento upang magdagdag ng pahalang na espasyo sa pagitan ng mga elemento ng bata nito:



< katawan >

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

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

< / div >

< / katawan >

Dito, sa parent

element:

  • “ baluktot ” ang klase ay lumilikha ng isang flexible na layout.
  • “ espasyo-x-8 ” class ay nagdaragdag ng 8 unit ng horizontal spacing sa pagitan ng flex elements sa loob ng container.
  • “ m-10 ” class ay nagdaragdag ng margin na 10 unit sa lahat ng panig ng lalagyan.
  • “ h-20 ” class ay nagtatakda ng taas ng lalagyan sa 20 units.
  • “ w-max ” klase ay nagtatakda ng lapad ng lalagyan sa maximum na lapad ng nilalaman nito.

Sa mga elemento ng child

:

  • “ bg-teal-500 ” itinatakda ng klase ang background ng mga elemento ng flex sa kulay.
  • “ w-20 ” class ay nagtatakda ng lapad ng bawat flex item sa 20 units.
  • “ p-5 ” Nagdaragdag ang klase ng 5 unit ng padding sa lahat ng panig ng bawat flex item.

Output

Ang output sa itaas ay nagpapahiwatig na ang pahalang na espasyo sa pagitan ng flex element ay matagumpay na nailapat.

Paano Magdagdag ng Vertical Space sa Pagitan ng Mga Elemento sa Tailwind?

Upang magdagdag ng patayong espasyo sa pagitan ng mga elemento sa Tailwind, ang ' space-y- Ang klase ng ” ay ginagamit kasama ang partikular na elemento sa HTML program. Ang klase na ito ay nagdaragdag ng espasyo sa pagitan ng mga elemento sa kahabaan ng y-axis.

Syntax

klase = 'space-y- ...' >...< / elemento>

Dito, kinakatawan ng 'y' ang 'y-axis' o 'vertical space'. Tiyaking palitan ang “” ng anumang tunay na halaga, gaya ng “5”, “12” atbp.

Halimbawa: Paglalapat ng Vertical Space sa Pagitan ng Mga Elemento sa Tailwind

Sa halimbawang ito, mayroon kaming flex container na may ilang child element sa isang column. Gagamitin natin ang ' space-y-5 ' utility class na may '

” elemento upang magdagdag ng patayong espasyo sa pagitan ng mga elemento ng bata nito:

< katawan >

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

< / katawan >

dito:

  • “ baluktot ” ang klase ay lumilikha ng isang flexible na layout.
  • “ flex-col ” class aligns ang flex item sa isang vertical na direksyon (sa isang column).
  • “ space-y-5 ” class ay nagdaragdag ng 5 unit ng vertical spacing sa pagitan ng flex elements sa loob ng container.
  • “ m-10 ” class ay nagdaragdag ng margin na 10 unit sa lahat ng panig ng lalagyan.
  • “ text-center ” class ay nakahanay sa text ng container sa gitna.

Output

Ang patayong espasyo sa pagitan ng mga elemento ng pagbaluktot ay nailapat nang mahusay.

Konklusyon

Upang idagdag ang pahalang at patayong espasyo sa pagitan ng mga elemento sa Tailwind, ang ' space-x- 'at' space-y- ” Ang mga utility class ay ginagamit kasama ng mga gustong elemento sa HTML program ayon sa pagkakabanggit. Karaniwang ginagamit ang mga klase na ito na may mga flex at grid na lalagyan upang kontrolin ang espasyo sa pagitan ng mga elemento ng kanilang anak. Inihalimbawa ng artikulong ito ang paraan ng paglalapat ng pahalang at patayong espasyo sa pagitan ng mga elemento sa Tailwind.

Iba pa

Kategorya

Patok Na Mga Post

Ano ang Roblox Security Notifications?

Kunin ang Filter at Subaybayan ang Kubernetes Events

Paano Kumuha ng Kasalukuyang Timestamp sa Java

Atlas Download Logs

ibalik ang DECR

6 Pinakamahusay na Rocket League Discord Server na Sasalihan sa 2022

Paano Mag-drop ng Pin sa iPhone? Isang Pangunahing Gabay

Batch File Copy: Isang Gabay sa Pagkopya ng mga File Gamit ang Batch Scripts

SQL Lag

Paano Mag-install ng KDE sa Ubuntu 24.04

Paano Mag-install ng Anaconda sa Linux

Paano Gamitin ang PyGPT4All sa Python

Paano Gamitin ang /kill Command sa Minecraft?

Bakit ginagamit ang Capacitor sa isang Defibrillator

Paano I-install ang LLVM Clang C, C++, at Objective-C Compiler sa Debian 12

Paano Sumulat ng Mga File Gamit ang fs.writeFile() sa Node.js?

Paano Pangasiwaan ang Contenteditable Change Events sa JavaScript

Ano ang AWS Control Tower at Paano Ito Gamitin?

Paano Ilapat ang Hover sa Box Decoration Break sa Tailwind?

I-recover ang Data sa Linux gamit ang ddrescue