Ruang mendatar ialah ruang di sepanjang paksi-x antara elemen anak bekas lentur atau grid apabila ia disusun dalam satu baris. Ruang menegak ialah ruang di sepanjang paksi-y antara elemen anak bekas lentur atau grid apabila ia disusun dalam lajur.
Artikel ini akan menunjukkan:
- Bagaimana untuk Menambah Ruang Mendatar Antara Elemen dalam Tailwind?
- Bagaimana untuk Menambah Ruang Menegak Antara Elemen dalam Tailwind?
Bagaimana untuk Menambah Ruang Mendatar Antara Elemen dalam Tailwind?
Untuk menambah ruang mendatar antara elemen dalam Tailwind, “ ruang-x-
Sintaks
Di sini, 'x' mewakili 'paksi-x' atau 'ruang mendatar'. Pastikan untuk menggantikan '
Contoh: Menerapkan Ruang Mendatar Antara Elemen dalam Tailwind
Dalam contoh ini, kami mempunyai bekas fleksibel dengan beberapa elemen kanak-kanak. Kami akan menggunakan ' ruang-x-8 kelas utiliti dengan ' Di sini, dalam elemen Dalam elemen Pengeluaran Output di atas menunjukkan bahawa ruang mendatar antara elemen flex telah berjaya digunakan. Untuk menambah ruang menegak antara elemen dalam Tailwind, “ ruang-y- Sintaks Di sini, 'y' mewakili 'paksi-y' atau 'ruang menegak'. Pastikan untuk menggantikan ' Contoh: Menggunakan Ruang Menegak Antara Elemen dalam Tailwind Dalam contoh ini, kami mempunyai bekas fleksibel dengan beberapa elemen kanak-kanak dalam lajur. Kami akan menggunakan ' ruang-y-5 kelas utiliti dengan ' di sini: Pengeluaran Ruang menegak antara elemen lentur telah digunakan dengan cekap. Untuk menambah ruang mendatar dan menegak antara elemen dalam Tailwind, “ ruang-x-
< badan >
< div kelas = 'ruang fleksibel-x-8 m-10 h-20 w-maks' >
< div kelas = 'bg-teal-500 w-20 p-5' > 1 < / div >
< div kelas = 'bg-teal-500 w-20 p-5' > 2 < / div >
< div kelas = 'bg-teal-500 w-20 p-5' > 3 < / div >
< div kelas = 'bg-teal-500 w-20 p-5' > 4 < / div >
< div kelas = 'bg-teal-500 w-20 p-5' > 5 < / div >
< div kelas = 'bg-teal-500 w-20 p-5' > 6 < / div >
< / div >
< / badan >
Bagaimana untuk Menambah Ruang Menegak Antara Elemen dalam Tailwind?
< div kelas = 'flex-col space-y-5 m-10 pusat teks' >
< div kelas = 'bg-teal-500 p-5' > 1 < / div >
< div kelas = 'bg-teal-500 p-5' > 2 < / div >
< div kelas = 'bg-teal-500 p-5' > 3 < / div >
< div kelas = 'bg-teal-500 p-5' > 4 < / div >
< / div >
< / badan >
Kesimpulan