Tailwind CSS menyediakan “ margin ” kelas utiliti yang membolehkan pengguna mengawal jarak di sekeliling elemen. The jidar mendatar menambah ruang di sebelah kiri dan kanan elemen, manakala a margin menegak menambah ruang pada bahagian atas dan bawah elemen. Tailwind menawarkan pelbagai kelas utiliti untuk menambah jidar mendatar atau menegak pada elemen yang dikehendaki.
Artikel ini akan menjadi contoh:
Bagaimana untuk Menambah Margin Mendatar dalam Tailwind?
Untuk menambah margin mendatar pada elemen dalam Tailwind, “ mx-
Sintaks
< unsur kelas = 'mx-
Di sini, 'mx' mewakili 'paksi-x' atau 'margin mendatar'. Pastikan untuk menggantikan '
Contoh: Menggunakan Margin Mendatar pada Elemen HTML
Dalam contoh ini, kami akan menggunakan ' mx-10 kelas utiliti dengan ' Untuk menambah jidar menegak pada elemen dalam Tailwind, gunakan ' saya- Sintaks Contoh: Menggunakan Margin Menegak pada Elemen HTML Dalam contoh ini, kami akan menggunakan ' saya-10 kelas utiliti dengan ' Untuk menambah margin mendatar dan menegak dalam Tailwind, “ mx-
< badan >
< div kelas = 'h-skrin mx-10 bg-purple-500' >
< hlm kelas = 'pusat teks teks-5xl' > Margin dalam CSS Tailwind hlm >
div >
badan >
Pengeluaran
Output di atas menunjukkan margin di sebelah kiri dan kanan bekas. Ini menunjukkan bahawa jidar mendatar telah digunakan pada elemen bekas dengan jayanya. Bagaimana untuk Menambah Margin Menegak dalam Tailwind?
Di sini, 'my' mewakili 'paksi-y' atau 'margin menegak'. Pastikan untuk menggantikan '
< div kelas = 'h-96 my-10 bg-purple-500' >
< hlm kelas = 'pusat teks teks-5xl' > Margin dalam CSS Tailwind hlm >
div >
badan >
Pengeluaran
Output di atas menunjukkan margin pada bahagian atas dan bawah bekas. Ini menunjukkan bahawa jidar menegak telah digunakan dengan berkesan pada elemen bekas. Kesimpulan