Blog ini akan memberikan ide untuk memberikan ruang yang sama antara beberapa elemen di Tailwind.
Bagaimana Cara Menetapkan Ruang yang Sama Antara Beberapa Elemen di Tailwind?
Pengguna dapat menetapkan spasi yang sama antar elemen dengan menggunakan tombol “ spasi-{x/y}-{ukuran} ” kelas utilitas. Pengguna dapat menambahkan spasi pada sumbu x atau y dengan menentukan nilai integer. Utilitas spasi diperlukan karena membuat halaman web menarik. Jika laman web tidak memiliki jarak antar elemen yang tepat, laman web tidak akan menarik pengguna.
Mari kita ambil contoh kode untuk menetapkan jarak yang sama antar elemen kisi.
Metode 1: Menetapkan Spasi pada sumbu X.
Ruang yang sama yang diberikan pada sumbu x membuat jarak yang sama di kanan dan kiri elemen. Untuk menetapkan spasi pada sumbu x gunakan sintaks berikut:
ruang angkasa - X - { ukuran }
Ukurannya bisa berupa nilai integer apa pun.
Perhatikan kode di bawah ini untuk menetapkan ruang yang sama pada sumbu x:
< tubuh >< div kelas = 'mx-4 grid grid-cols-4 spasi-x-4' >
< div kelas = 'bg-hijau-400 h-16 bulat-lg perbatasan-2 perbatasan-hijau-800' > 1 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg perbatasan-2 perbatasan-hijau-800' > 2 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg perbatasan-2 perbatasan-hijau-800' > 3 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg perbatasan-2 perbatasan-hijau-800' > 4 div >
div >
tubuh >
Dalam kode ini:
- “ mx-4 ” menambahkan margin sebesar 4 px pada sumbu x (kanan dan kiri).
- “ jaringan ” kelas membuat grid.
- “ grid-cols-4 ” buat 4 kolom di grid.
- “ spasi-x-4 ” menambahkan ruang 4px di antara elemen grid.
- “ bg-hijau-400 ” mengatur warna latar belakang menjadi hijau.
- “ jam-16 ” mengatur tingginya menjadi 16px.
- “ bulat-lg ” membuat sudutnya membulat dan radius batasnya besar.
- “ perbatasan-2 ” membuat batas 2px di sekitar elemen.
- “ perbatasan-hijau-800 ” membuat perbatasan menjadi hijau tua.
Keluaran
Pratinjau output yang dibuat oleh kode di atas:
Dapat dilihat bahwa jarak 4px diberikan antar elemen.
Metode 2: Menetapkan ruang pada sumbu y.
Jarak dapat ditetapkan pada sumbu y mirip dengan metode di atas, dengan sedikit perubahan pada kode di atas. Ini memberikan ruang di sepanjang sumbu y (atas dan bawah). Sintaksnya adalah:
Kode di bawah ini dapat diimplementasikan untuk menambahkan spasi di sepanjang sumbu y:
< tubuh >< div kelas = 'mx-4 my-4 spasi-y-4' >
< div kelas = 'bg-hijau-400 h-16 bulat-lg perbatasan-2 perbatasan-hijau-800' > 1 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg perbatasan-2 perbatasan-hijau-800' > 2 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg perbatasan-2 perbatasan-hijau-800' > 3 div >
< div kelas = 'bg-hijau-400 h-16 bulat-lg perbatasan-2 perbatasan-hijau-800' > 4 div >
div >
tubuh >
Dalam kode ini:
- “ mx-4 ” menambahkan margin 4px ke kiri dan kanan elemen untuk membuat output lebih optimal.
- “ saya-4 ” menambahkan margin 4px pada sumbu y (atas dan bawah).
- “ spasi-y-4 ” menambahkan spasi 4px pada sumbu y (atas dan bawah).
Keluaran
Simpan kode di atas dan pratinjau halaman web yang dibuatnya untuk melihat spasi sebagai:
Itu semua tentang menetapkan ruang yang sama antar elemen.
Kesimpulan
Untuk menetapkan ruang yang sama antara beberapa elemen di Tailwind, pengguna dapat menggunakan “ spasi-{x/y}-{ukuran} ” kelas utilitas dan tentukan nilai integer sebagai ukuran sesuai dengan kebutuhan. Jarak yang sama antar elemen membuat keluaran lebih terukur dan pemirsa tetap terlibat dengan laman web. Postingan ini telah menyediakan metode untuk menetapkan jarak yang sama antara beberapa elemen di Tailwind.