Blog ini akan memberikan idea untuk memberikan ruang yang sama antara berbilang elemen dalam Tailwind.
Bagaimana untuk menetapkan ruang yang sama antara pelbagai elemen dalam tailwind?
Pengguna boleh menetapkan ruang yang sama antara elemen dengan menggunakan ' ruang-{x/y}-{saiz} ” kelas utiliti. Pengguna boleh menambah ruang pada paksi x atau y dengan menentukan nilai integer. Utiliti jarak adalah perlu kerana ia menjadikan halaman web menarik. Jika halaman web tidak mempunyai jarak yang betul antara elemen, ia tidak akan menarik pengguna.
Mari kita ambil contoh kod untuk menetapkan ruang yang sama antara elemen grid.
Kaedah 1: Menetapkan Ruang pada paksi X.
Ruang yang sama diberikan pada paksi-x menjadikan jarak yang sama di sebelah kanan dan kiri elemen. Untuk menetapkan ruang pada paksi-x gunakan sintaks berikut:
angkasa lepas - x - { saiz }
Saiz boleh berupa sebarang nilai integer.
Pertimbangkan kod di bawah untuk memberikan ruang yang sama pada paksi-x:
< badan >< div kelas = 'mx-4 grid grid-cols-4 space-x-4' >
< div kelas = 'bg-hijau-400 h-16 bulat-lg sempadan-2 sempadan-hijau-800' > 1 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg sempadan-2 sempadan-hijau-800' > 2 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg sempadan-2 sempadan-hijau-800' > 3 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg sempadan-2 sempadan-hijau-800' > 4 div >
div >
badan >
Dalam kod ini:
- “ mx-4 ” menambah margin 4 px pada paksi-x(kanan dan kiri).
- ' grid ” kelas mencipta grid.
- ' grid-cols-4 ” buat 4 lajur dalam grid.
- ' ruang-x-4 ” menambah ruang 4px antara elemen grid.
- “ bg-hijau-400 ” menetapkan warna latar belakang kepada hijau.
- “ h-16 ” menetapkan ketinggian kepada 16px.
- ' bulat-lg ” menjadikan sudut bulat dan jejari sempadan adalah besar.
- ' sempadan-2 ” membuat sempadan 2px di sekeliling elemen.
- “ sempadan-hijau-800 ” menjadikan sempadan hijau gelap.
Pengeluaran
Pratonton output yang dibuat oleh kod di atas:
Ia boleh dilihat bahawa jarak 4px ditetapkan antara elemen.
Kaedah 2: Menetapkan ruang pada paksi-y.
Jarak boleh ditetapkan pada paksi-y serupa dengan kaedah di atas, dengan perubahan kecil dalam kod di atas. Ia memberikan ruang di sepanjang paksi-y (atas dan bawah). Sintaks untuknya ialah:
Kod di bawah boleh dilaksanakan untuk menambah ruang di sepanjang paksi-y:
< badan >< div kelas = 'mx-4 my-4 space-y-4' >
< div kelas = 'bg-hijau-400 h-16 bulat-lg sempadan-2 sempadan-hijau-800' > 1 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg sempadan-2 sempadan-hijau-800' > 2 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg sempadan-2 sempadan-hijau-800' > 3 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg sempadan-2 sempadan-hijau-800' > 4 div >
div >
badan >
Dalam kod ini:
- “ mx-4 ” menambah margin 4px ke kiri dan kanan elemen untuk menjadikan output lebih dioptimumkan.
- “ saya-4 ” menambah margin 4px pada paksi-y(atas dan bawah).
- “ ruang-y-4 ” menambah ruang 4px pada paksi-y(atas dan bawah).
Pengeluaran
Simpan kod di atas dan pratonton halaman web yang dibuat olehnya untuk melihat jarak sebagai:
Itu semua tentang memberikan ruang yang sama antara elemen.
Kesimpulan
Untuk memperuntukkan ruang yang sama antara berbilang elemen dalam Tailwind, pengguna boleh menggunakan ' ruang-{x/y}-{saiz} ” kelas utiliti dan tentukan nilai integer sebagai saiz mengikut keperluan. Jarak yang sama antara elemen menjadikan output lebih berskala dan penonton kekal terlibat dengan halaman web. Siaran ini telah menyediakan kaedah untuk menetapkan ruang yang sama antara berbilang elemen dalam Tailwind.