Dalam CSS Tailwind, ' ruang antara ” utiliti digunakan untuk mengawal ruang antara elemen kanak-kanak bekas flex atau grid. Ia menawarkan pelbagai kelas, seperti 'space-x-
Panduan ini akan memberi contoh kaedah menggunakan nilai ruang negatif dalam Tailwind.
Bagaimana untuk Menggunakan Nilai Ruang Negatif dalam Tailwind?
Untuk menggunakan nilai ruang negatif dalam Tailwind, mula-mula buat struktur HTML. Kemudian, gunakan tanda sempang “ – ” dengan “ruang antara” kelas utiliti yang dikehendaki untuk menukarnya kepada nilai negatif. ' -ruang-x-
Mari kita lihat contoh di bawah untuk memahaminya dengan lebih baik.
Contoh 1: Gunakan Jarak Mendatar Negatif Antara Elemen
Dalam contoh ini, kami mempunyai bekas fleksibel dengan beberapa elemen kanak-kanak berturut-turut. Kami akan menggunakan ' -ruang-x-8 ” untuk menggunakan jarak mendatar negatif antara elemen flex:
< badan >< div kelas = 'flex -ruang-x-8 m-10 h-20 w-maks' >
< div kelas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 1 div >
< div kelas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 2 div >
< div kelas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 3 div >
< div kelas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 4 div >
< div kelas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 5 div >
< div kelas = 'bg-teal-500 w-20 p-5 border-2 border-teal-800' > 6 div >
div >
badan >
Di sini, dalam elemen
-
- “ lentur ” kelas mencipta susun atur yang fleksibel.
- “ -ruang-x-8 kelas ” menambah 8 unit jarak mendatar negatif antara elemen lentur dalam bekas.
- “ m-10 ” kelas menambah jidar 10 unit pada semua sisi bekas.
- “ h-20 ” kelas menetapkan ketinggian bekas kepada 20 unit.
- “ w-maks ” kelas menetapkan lebar bekas kepada lebar kandungan maksimumnya.
Dalam elemen
-
- “ bg-teal-500 ” kelas menetapkan latar belakang elemen lentur kepada terang.
- “ w-20 ” kelas menetapkan lebar setiap item flex kepada 20 unit.
- “ p-5 ” kelas menambah 5 unit padding pada semua sisi setiap item flex.
- “ sempadan-2 ” kelas menetapkan lebar sempadan bekas kepada 2 unit.
- “ sempadan-teal-800 ” kelas menggunakan warna teal pada sempadan.
Pengeluaran
Output di atas menunjukkan bahawa elemen flex bertindih. Ini menunjukkan bahawa nilai ruang mendatar negatif telah berjaya digunakan.
Contoh 2: Gunakan Jarak Menegak Negatif Antara Elemen
Dalam contoh ini, kami mempunyai bekas fleksibel dengan beberapa elemen kanak-kanak dalam lajur. Kami akan menggunakan ' -ruang-y-7 ” untuk menggunakan jarak menegak negatif antara elemen flex:
< badan >< div kelas = 'flex flex-col -space-y-7 m-10 pusat teks' >
< div kelas = 'bg-teal-500 p-5 border-2 border-teal-800' > 1 div >
< div kelas = 'bg-teal-500 p-5 border-2 border-teal-800' > 2 div >
< div kelas = 'bg-teal-500 p-5 border-2 border-teal-800' > 3 div >
< div kelas = 'bg-teal-500 p-5 border-2 border-teal-800' > 4 div >
div >
badan >
di sini:
-
- “ lentur ” kelas mencipta susun atur yang fleksibel.
- “ flex-col ” kelas menjajarkan item flex dalam arah menegak.
- “ -ruang-y-5 kelas ” menambah 7 unit jarak menegak negatif antara elemen lentur dalam bekas.
- “ m-10 ” kelas menambah jidar 10 unit pada semua sisi bekas.
- “ pusat teks ” kelas menjajarkan teks bekas ke tengah.
Pengeluaran
Ia boleh dilihat bahawa elemen flex bertindih. Ini menunjukkan bahawa nilai ruang menegak negatif telah berjaya digunakan.
Kesimpulan
Untuk menggunakan nilai ruang negatif dalam Tailwind, gunakan ' -ruang-x-