Tailwind'de Öğeler Arasına Yatay ve Dikey Boşluk Nasıl Eklenir?

Tailwind De Ogeler Arasina Yatay Ve Dikey Bosluk Nasil Eklenir



Tailwind CSS, ' arasındaki boşluk ” esnek veya ızgara kapsayıcı öğeleri arasındaki boşluğu kontrol etmek için yardımcı programlar. “space-x-”, “space-y-”, “space-x-reverse”, “space-y-reverse” gibi çeşitli sınıflara sahiptir. Bu yardımcı programlar yatay ve kapsayıcıdaki esnek veya ızgara öğeleri arasındaki dikey boşluk.

yatay boşluk bir sıra halinde düzenlendiklerinde bir esnek veya ızgara kabının alt öğeleri arasındaki x ekseni boyunca bir boşluktur. Dikey boşluk bir sütunda düzenlendiklerinde, bir esnek veya ızgara kabının alt öğeleri arasındaki y ekseni boyunca bir boşluktur.

Bu makale şunları gösterecek:





Tailwind'de Öğeler Arasına Yatay Boşluk Nasıl Eklenir?

Tailwind'deki öğeler arasına yatay boşluk eklemek için ' boşluk-x- ” sınıfı, HTML programında istenilen öğe ile birlikte kullanılır. Bu sınıf, x ekseni boyunca öğeler arasına boşluk ekler.



Sözdizimi



<öğe sınıf = 'boşluk-x- ...'>... < / eleman>

Burada 'x', 'x eksenini' veya 'yatay alanı' temsil eder. '' yerine '4', '10' vb. gibi herhangi bir geçerli değer koyduğunuzdan emin olun.



Örnek: Tailwind'de Öğeler Arasına Yatay Boşluk Uygulama

Bu örnekte, bazı alt öğeler içeren esnek bir kapsayıcımız var. “ boşluk-x-8 ' yardımcı sınıf ile '

” alt öğeleri arasına yatay boşluk eklemek için öğe:



< vücut >

< div sınıf = 'esnek boşluk-x-8 m-10 h-20 w-maks' >

< div sınıf = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div sınıf = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div sınıf = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div sınıf = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div sınıf = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div sınıf = 'bg-teal-500 w-20 p-5' > 6 < / div >

< / div >

< / vücut >

Burada, üst

öğesinde:

  • “ esnek ” sınıfı esnek bir düzen oluşturur.
  • “ boşluk-x-8 ” sınıfı, bir kap içindeki esnek öğeler arasına 8 birim yatay boşluk ekler.
  • “ m-10 ” sınıfı, kabın tüm kenarlarına 10 birimlik bir kenar boşluğu ekler.
  • “ h-20 ” sınıfı, konteynerin yüksekliğini 20 birim olarak ayarlar.
  • “ w-maks ” sınıfı, kabın genişliğini maksimum içerik genişliğine ayarlar.

Alt

öğelerinde:

  • “ bg-teal-500 ” sınıfı, esnek öğelerin arka planını deniz mavisi olarak ayarlar.
  • “ w-20 ” sınıfı, her esnek öğenin genişliğini 20 birime ayarlar.
  • “ p-5 ” sınıfı, her esnek öğenin tüm kenarlarına 5 birim dolgu ekler.

Çıktı

Yukarıdaki çıktı, esnek eleman arasındaki yatay boşluğun başarıyla uygulandığını gösterir.

Tailwind'de Öğeler Arasına Dikey Boşluk Nasıl Eklenir?

Tailwind'deki öğeler arasına dikey boşluk eklemek için ' boşluk-y- ” sınıfı, HTML programında belirli öğe ile birlikte kullanılır. Bu sınıf, y ekseni boyunca öğeler arasına boşluk ekler.

Sözdizimi

<öğe sınıf = 'boşluk-y- ...' >...< / eleman>

Burada 'y', 'y eksenini' veya 'dikey alanı' temsil eder. '' yerine '5', '12' gibi herhangi bir gerçek değer koyduğunuzdan emin olun.

Örnek: Tailwind'de Öğeler Arasına Dikey Boşluk Uygulama

Bu örnekte, bir sütunda bazı alt öğeler içeren esnek bir kapsayıcımız var. “ boşluk-y-5 ' yardımcı sınıf ile '

” öğesi, alt öğeleri arasına dikey boşluk eklemek için:

< vücut >

< div sınıf = 'flex flex-col boşluk-y-5 m-10 metin merkezi' >
< div sınıf = 'bg-teal-500 p-5' > 1 < / div >
< div sınıf = 'bg-teal-500 p-5' > 2 < / div >
< div sınıf = 'bg-teal-500 p-5' > 3 < / div >
< div sınıf = 'bg-teal-500 p-5' > 4 < / div >
< / div >

< / vücut >

Burada:

  • “ esnek ” sınıfı esnek bir düzen oluşturur.
  • “ flex-col ” sınıfı, esnek öğeleri dikey yönde (bir sütunda) hizalar.
  • “ boşluk-y-5 ” sınıfı, bir kap içindeki esnek öğeler arasına 5 birim dikey boşluk ekler.
  • “ m-10 ” sınıfı, kabın tüm kenarlarına 10 birimlik bir kenar boşluğu ekler.
  • “ metin merkezi ” sınıfı, kabın metnini ortaya hizalar.

Çıktı

Esnek elemanlar arasındaki dikey boşluk verimli bir şekilde uygulanmıştır.

Çözüm

Tailwind'deki öğeler arasına yatay ve dikey boşluk eklemek için ' boşluk-x- ' Ve ' boşluk-y- ”fayda sınıfları, sırasıyla HTML programında istenen öğelerle birlikte kullanılır. Bu sınıflar, alt öğeleri arasındaki boşluğu kontrol etmek için genellikle esnek ve ızgara kaplarla birlikte kullanılır. Bu makale, Tailwind'deki öğeler arasında yatay ve dikey boşluk uygulama yöntemini örneklemiştir.

Diğer

Kategori

Popüler Mesajlar

Linux Fark Komutu

Bash'te 2B Diziyi Okumak İçin readarray Komutunu Kullanma

Nesnenin JavaScript'te Class instanceof olmadığını kontrol edin

Raspberry Pi'de Dosya Nasıl Bulunur?

Java ArrayDeque – add(), addAll()

Linux Mint ve Windows 10 Hız Testi

Debian 12 Masaüstü/Sunucuya Sabit IP Adresi Nasıl Atanır

Git Nasıl Uzak Şubeye Gönderilir

Salesforce Dinlenme API'sı

–hard Flag ile Git Reset Nasıl Geri Alınır

“git rev-parse” Ne İşe Yarar?

Git Ayrılmış Kafa Sorununu Anlama ve Çözme

Roblox'ta Oyuncu kimliği nedir?

Linux Mint 21'e Vim Nasıl Kurulur

Windows 11 Kamera Sorunlarını Giderme

Node.js'de console.countReset() ile Sayım Nasıl Sıfırlanır?

Windows 10'da Microsoft Photos Uygulaması Nasıl İndirilir ve Yeniden Yüklenir

Komut İsteminde Yorum Nasıl Eklenir

C++ Tuple

Salesforce'ta Rest API'yi Kullanarak Kayıtları Alın