Di Tailwind CSS, “ ruang antara ” Utilitas digunakan untuk mengontrol ruang antara elemen anak wadah fleksibel atau kotak. Ia menawarkan berbagai kelas, seperti “spasi-x-
Panduan ini akan memberikan contoh metode penggunaan nilai spasi negatif di Tailwind.
Bagaimana Cara Menggunakan Nilai Ruang Negatif di Tailwind?
Untuk menggunakan nilai spasi negatif di Tailwind, pertama-tama buatlah struktur HTML. Kemudian, gunakan tanda hubung “ – ” dengan “ruang antar” kelas utilitas yang diinginkan untuk mengubahnya menjadi nilai negatif. “ -spasi-x-
Mari kita lihat contoh di bawah ini untuk memahaminya dengan lebih baik.
Contoh 1: Terapkan Jarak Horizontal Negatif Antar Elemen
Dalam contoh ini, kita memiliki wadah fleksibel dengan beberapa elemen turunan dalam satu baris. Kami akan menggunakan “ -spasi-x-8 ” kelas untuk menerapkan jarak horizontal negatif antara elemen fleksibel:
< tubuh >< div kelas = 'fleksibel -spasi-x-8 m-10 jam-20 w-maks' >
< div kelas = 'bg-teal-500 w-20 p-5 perbatasan-2 perbatasan-teal-800' > 1 div >
< div kelas = 'bg-teal-500 w-20 p-5 perbatasan-2 perbatasan-teal-800' > 2 div >
< div kelas = 'bg-teal-500 w-20 p-5 perbatasan-2 perbatasan-teal-800' > 3 div >
< div kelas = 'bg-teal-500 w-20 p-5 perbatasan-2 perbatasan-teal-800' > 4 div >
< div kelas = 'bg-teal-500 w-20 p-5 perbatasan-2 perbatasan-teal-800' > 5 div >
< div kelas = 'bg-teal-500 w-20 p-5 perbatasan-2 perbatasan-teal-800' > 6 div >
div >
tubuh >
Di sini, di elemen
-
- “ melenturkan ” kelas menciptakan tata letak yang fleksibel.
- “ -spasi-x-8 ” kelas menambahkan 8 unit jarak horizontal negatif antara elemen fleksibel dalam wadah.
- “ m-10 Kelas ” menambahkan margin 10 unit ke semua sisi wadah.
- “ h-20 ”kelas menetapkan ketinggian wadah menjadi 20 unit.
- “ w-maks ” kelas menyetel lebar penampung ke lebar konten maksimumnya.
Di elemen
-
- “ bg-teal-500 ” kelas menyetel latar belakang elemen fleksibel menjadi teal.
- “ w-20 ”kelas menetapkan lebar setiap item fleksibel menjadi 20 unit.
- “ hal-5 ” kelas menambahkan 5 unit bantalan ke semua sisi setiap item fleksibel.
- “ perbatasan-2 Kelas ” menyetel lebar batas container menjadi 2 unit.
- “ perbatasan-teal-800 ” kelas menerapkan warna teal pada tepinya.
Keluaran
Output di atas menunjukkan bahwa elemen fleksibel saling tumpang tindih. Hal ini menunjukkan bahwa nilai spasi horizontal negatif telah berhasil diterapkan.
Contoh 2: Terapkan Jarak Vertikal Negatif Antar Elemen
Dalam contoh ini, kita memiliki wadah fleksibel dengan beberapa elemen turunan dalam sebuah kolom. Kami akan menggunakan “ -spasi-y-7 ” kelas untuk menerapkan jarak vertikal negatif antara elemen fleksibel:
< tubuh >< div kelas = 'flex flex-col -space-y-7 m-10 pusat teks' >
< div kelas = 'bg-teal-500 p-5 perbatasan-2 perbatasan-teal-800' > 1 div >
< div kelas = 'bg-teal-500 p-5 perbatasan-2 perbatasan-teal-800' > 2 div >
< div kelas = 'bg-teal-500 p-5 perbatasan-2 perbatasan-teal-800' > 3 div >
< div kelas = 'bg-teal-500 p-5 perbatasan-2 perbatasan-teal-800' > 4 div >
div >
tubuh >
Di Sini:
-
- “ melenturkan ” kelas menciptakan tata letak yang fleksibel.
- “ fleksibel-col ” kelas menyelaraskan item fleksibel dalam arah vertikal.
- “ -spasi-y-5 ” kelas menambahkan 7 unit jarak vertikal negatif 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
Dapat dilihat bahwa elemen flex saling tumpang tindih. Hal ini menunjukkan bahwa nilai ruang vertikal negatif telah berhasil diterapkan.
Kesimpulan
Untuk menggunakan nilai spasi negatif di Tailwind, gunakan “ -spasi-x-