Bagaimana Cara Menambahkan Ruang Horizontal dan Vertikal Antar Elemen di Tailwind?

Bagaimana Cara Menambahkan Ruang Horizontal Dan Vertikal Antar Elemen Di Tailwind



Tailwind CSS menyediakan “ ruang antara ” utilitas untuk mengontrol ruang antara elemen wadah fleksibel atau kotak. Ini memiliki berbagai kelas, seperti 'ruang-x-', 'ruang-y-', 'ruang-x-mundur', 'ruang-y-mundur', dll. Utilitas ini menambahkan horizontal dan ruang vertikal antara elemen flex atau grid dalam wadah.

Ruang horisontal adalah ruang sepanjang sumbu x antara elemen turunan dari wadah fleksibel atau kisi saat disusun dalam satu baris. Ruang vertikal adalah ruang sepanjang sumbu y antara elemen turunan dari wadah fleksibel atau kisi saat disusun dalam kolom.

Artikel ini akan menunjukkan:





Bagaimana Cara Menambahkan Ruang Horizontal Antar Elemen di Tailwind?

Untuk menambahkan spasi horizontal antar elemen di Tailwind, tombol “ spasi-x- ” digunakan dengan elemen yang diinginkan dalam program HTML. Kelas ini menambahkan ruang antar elemen sepanjang sumbu x.



Sintaksis



kelas = 'ruang-x- ...>... < / elemen>

Di sini, 'x' mewakili 'sumbu x' atau 'ruang horizontal'. Pastikan untuk mengganti “” dengan nilai yang valid, seperti “4”, “10”, dll.



Contoh: Menerapkan Ruang Horizontal Antar Elemen di Tailwind

Dalam contoh ini, kami memiliki wadah fleksibel dengan beberapa elemen turunan. Kami akan menggunakan ' ruang-x-8 ” kelas utilitas dengan “

” untuk menambahkan spasi horizontal di antara elemen turunannya:



< tubuh >

< div kelas = 'ruang fleksibel-x-8 m-10 h-20 w-max' >

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

< / div >

< / tubuh >

Di sini, di elemen

induk:

  • “ melenturkan ” kelas membuat tata letak yang fleksibel.
  • “ ruang-x-8 ” kelas menambahkan 8 unit jarak horizontal antara elemen fleksibel dalam wadah.
  • “ m-10 ” kelas menambahkan margin 10 unit ke semua sisi wadah.
  • “ h-20 ” class menyetel tinggi wadah menjadi 20 unit.
  • “ w-maks ” kelas mengatur lebar wadah ke lebar konten maksimumnya.

Dalam elemen

anak:

  • “ bg-teal-500 ” class menyetel latar belakang elemen fleksibel menjadi teal.
  • “ w-20 ” kelas mengatur lebar setiap item fleksibel menjadi 20 unit.
  • “ hal-5 ” kelas menambahkan 5 unit padding ke semua sisi setiap item fleksibel.

Keluaran

Output di atas menunjukkan bahwa ruang horizontal antara elemen flex telah berhasil diterapkan.

Bagaimana Cara Menambahkan Ruang Vertikal Antar Elemen di Tailwind?

Untuk menambahkan ruang vertikal antar elemen di Tailwind, tombol “ spasi-y- ” kelas digunakan dengan elemen spesifik dalam program HTML. Kelas ini menambahkan ruang antar elemen sepanjang sumbu y.

Sintaksis

kelas = 'spasi-y- ...' >...< / elemen>

Di sini, 'y' mewakili 'sumbu y' atau 'ruang vertikal'. Pastikan untuk mengganti “” dengan nilai nyata apa pun, seperti “5”, “12”, dll.

Contoh: Menerapkan Ruang Vertikal Antar Elemen di Tailwind

Dalam contoh ini, kami memiliki wadah fleksibel dengan beberapa elemen anak di kolom. Kami akan menggunakan ' ruang-y-5 ” kelas utilitas dengan “

” elemen untuk menambahkan ruang vertikal di antara elemen turunannya:

< tubuh >

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

< / tubuh >

Di Sini:

  • “ melenturkan ” kelas membuat tata letak yang fleksibel.
  • “ flex-col ” kelas menyelaraskan item fleksibel dalam arah vertikal (dalam kolom).
  • “ ruang-y-5 ” kelas menambahkan 5 unit jarak vertikal antara elemen fleksibel dalam wadah.
  • “ m-10 ” kelas menambahkan margin 10 unit ke semua sisi wadah.
  • “ pusat teks ” kelas menyelaraskan teks wadah ke tengah.

Keluaran

Ruang vertikal antara elemen fleksibel telah diterapkan secara efisien.

Kesimpulan

Untuk menambahkan ruang horizontal dan vertikal antar-elemen di Tailwind, tombol “ spasi-x- ' Dan ' spasi-y- ” kelas utilitas digunakan dengan elemen yang diinginkan dalam program HTML masing-masing. Kelas-kelas ini biasanya digunakan dengan wadah fleksibel dan kisi untuk mengontrol ruang di antara elemen turunannya. Artikel ini mencontohkan metode penerapan ruang horizontal dan vertikal antar elemen di Tailwind.

Lainnya

Kategori

Pesan Populer

perintah git-log di Git | Dijelaskan

Cara Mengubah Mode Game di Minecraft

Apa itu Dalle-mini dan Bagaimana Cara Kerjanya?

Dapatkan Editor Registri Lama di Pembaruan Pembuat Windows 10 - Winhelponline

MySQL INSTR() Fungsi

Cara Membuat Tabel Dari Array Objek di JavaScript

Imshow SciPy

Bootstrap | Lencana dan Label

Mengapa MacBook Tidak Memiliki Layar Sentuh?

Bagaimana Cara Restart Aplikasi Node.js Secara Otomatis?

Perbaiki 'Salah temukan tautan info album' di Windows Media Player Restore

Cara Menggunakan Fungsi arsort() di PHP

Cara Menemukan SSID di iPhone – Panduan Mudah

Cara Menghubungkan Perselisihan ke Akun Jaringan PlayStation Anda

Cara Memperbaiki 'Masalah Font Buram' di Windows 10

Bagaimana Cara Mengunduh dan Menginstal Game yang Dihosting di GitHub?

Cara Memutar Video dari Terminal di Raspberry Pi

Cara Menemukan Nilai Maks dan Min dalam Matriks Kumpulan Data Besar di MATLAB

Cara Mengidentifikasi Kapasitor

Apa itu Pemetaan Port di Docker?