Siaran ini menghuraikan prosedur lengkap untuk menambah jurang antara lajur dalam Tailwind.
Bagaimana untuk Menambah Jurang Antara Lajur dalam Tailwind?
Untuk menambah jurang antara lajur dalam Tailwind, gunakan terbina dalam “ jurang-{saiz} ” utiliti. Ia menentukan nilai integer yang mewakili jurang antara lajur secara mendatar dan menegak. Mari lakukan tugas ini secara praktikal dengan bantuan contoh yang dinyatakan.
Struktur Fail Projek
' jurang-{saiz} ” utiliti boleh dilaksanakan dalam mana-mana projek Tailwind yang mengikut struktur fail yang diberikan:
Mari kita mulakan dengan contoh pertama.
Contoh 1: Gunakan Utiliti “gap-{size}” untuk Menambah Jurang yang Sama Antara Baris dan Lajur
Contoh ini menggunakan utiliti 'jurang-{size}' untuk menambah jurang yang sama secara mendatar dan menegak antara lajur yang diberikan.
Kod HTML
Gambaran keseluruhan kod berikut:
< kepala >
< pautan href = '/dist/output.css' rel = 'lembaran gaya' >
< / kepala >
< badan >
< h1 kelas = 'text-3xl font-bold text-center underline text-oren-600' > Selamat datang ke Linuxhint! < / h1 >< br >
< div kelas = 'mx-2 grid grid-cols-3 gap-4' >
< div kelas = 'sempadan-2 sempadan-oren-600' > Tutorial Pertama < / div >
< div kelas = 'sempadan-2 sempadan-oren-600' > Tutorial Kedua < / div >
< div kelas = 'sempadan-2 sempadan-oren-600' > Tutorial Ketiga < / div >
< div kelas = 'sempadan-2 sempadan-oren-600' > Tutorial Keempat < / div >
< div kelas = 'sempadan-2 sempadan-oren-600' > Tutorial Kelima < / div >
< div kelas = 'sempadan-2 sempadan-oren-600' > Tutorial Keenam < / div >
< div kelas = 'sempadan-2 sempadan-oren-600' > Tutorial Ketujuh < / div >
< div kelas = 'sempadan-2 sempadan-oren-600' > Tutorial Kelapan < / div >
< / div >
Dalam baris kod di atas:
- Pertama, pautkan fail CSS utama ' /dist/output.css ” dengan fail HTML sedia ada “ index.html ' menggunakan '
teg ” dalam bahagian “kepala”. - Seterusnya, bahagian 'badan' mencipta elemen '
' yang menggunakan ' Saiz huruf ”, “ Berat Font ”, “ Jajarkan Teks ”, “ Hiasan Teks ', dan juga ' Warna Teks ” Kelas Tailwind, masing-masing.
- Selepas itu, elemen '' ditambah yang menggunakan ' grid ' utiliti untuk menetapkan kandungannya dalam bilangan susun atur grid yang dinyatakan, ' margin kelas ” untuk menetapkan margin mendatar, dan “ jurang ” utiliti untuk menambah jurang yang ditentukan antara lajur.
- Dalam bahagian badan elemen “
”, lapan elemen “” lagi disertakan yang menggunakan “ Lebar Sempadan ' dan juga ' Warna Sempadan ” kelas masing-masing.Pengeluaran
Jalankan kod HTML di atas dalam pelayan langsung dan analisis output:
Seperti yang dilihat, output menambah jurang yang ditentukan antara lajur dalam kedua-dua dimensi dengan sewajarnya.
Contoh 2: Gunakan Utiliti “gap-{size}” untuk Menambah Jurang Antara Baris dan Lajur Secara Bebas
' jurang-{saiz} utiliti ” juga boleh dilaksanakan dengan dimensi “x(mendatar)” dan “y(menegak)” sebagai “jurang-x-{saiz}” untuk baris dan “jurang-y-{saiz}” untuk lajur untuk menambah jurang antara mereka secara individu.Mari lihat pelaksanaan praktikalnya.
Kod HTML
< kepala >
Lihat kod yang diberikan:
< pautan href = '/dist/output.css' rel = 'lembaran gaya' >
< / kepala >
< badan >
< div kelas = 'mx-2 grid grid-cols-4 gap-x-4 gap-y-6' >
< div kelas = 'sempadan-2 sempadan-oren-600' >Tutorial Pertama< / div >
< div kelas = 'sempadan-2 sempadan-oren-600' >Tutorial Kedua< / div >
< div kelas = 'sempadan-2 sempadan-oren-600' >Tutorial Ketiga< / div >
< div kelas = 'sempadan-2 sempadan-oren-600' >Tutorial Keempat< / div >
< div kelas = 'sempadan-2 sempadan-oren-600' >Tutorial Kelima< / div >
< div kelas = 'sempadan-2 sempadan-oren-600' >Tutorial Keenam< / div >
< div kelas = 'sempadan-2 sempadan-oren-600' >Tutorial Ketujuh< / div >
< div kelas = 'sempadan-2 sempadan-oren-600' >Tutorial Kelapan< / div >
< / div >
< badan >Di sini, ' gap-x-{saiz} utiliti ' menambah jurang antara baris dan ' gap-y-{saiz} ” menambah jurang yang ditentukan antara lajur secara bebas.
Pengeluaran
Hasil di atas mengesahkan bahawa jurang antara baris dan lajur digunakan dengan sewajarnya.
Kesimpulan
'Tailwind CSS' menyediakan ' terbina dalam jurang-{saiz} ” utiliti untuk menambah jurang antara lajur. Ia juga boleh digunakan untuk menambah jurang antara baris dan lajur secara berasingan melalui “ gap-x-{saiz} ' dan juga ' gap-y-{saiz} ” utiliti. Siaran ini menyediakan prosedur lengkap untuk menambah jurang antara lajur dalam Tailwind.
- Dalam bahagian badan elemen “