Dalam Tailwind CSS, a margin digunakan untuk mengawal jarak di sekeliling elemen tertentu. Ia menambah ruang antara elemen yang digunakan dan elemen sekelilingnya. Tailwind CSS menyediakan satu set utiliti margin dan nilai margin yang membenarkan pengguna menyesuaikan jarak di sekeliling elemen yang dikehendaki. Selain itu, pengguna boleh menambah margin pada satu sisi, seperti bahagian atas, bawah, kiri atau kanan elemen tertentu.
Blog ini akan menunjukkan contoh untuk menambah margin pada satu sisi elemen dalam Tailwind CSS.
Bagaimana untuk Menambah Margin pada Satu Sisi dalam Tailwind?
Untuk menambah margin pada satu sisi elemen dalam Tailwind, kelas utiliti berikut boleh digunakan:
Untuk memahaminya dengan lebih baik, lihat contoh yang disediakan di bawah.
Contoh 1: Tambah Margin pada Bahagian Atas Elemen
Dalam contoh ini, kami akan menggunakan ' mt-14 'kelas utiliti dalam' Pengeluaran Contoh 2: Tambah Margin pada Bahagian Bawah Elemen Dalam contoh ini, kami akan menggunakan ' mb-14 'kelas dalam' Contoh 3: Tambah Margin di Kiri Elemen Dalam contoh ini, kami akan menggunakan ' ml-14 'kelas dalam' Contoh 4: Tambah Margin di sebelah Kanan Elemen Dalam contoh ini, kami akan menggunakan ' encik-14 'kelas dalam' Untuk menambah margin pada satu sisi elemen dalam Tailwind, pelbagai kelas utiliti boleh digunakan, seperti ' ml-
< div kelas = 'h-96 mt-14 bg-ungu-500' >
< hlm kelas = 'pusat teks teks-5xl' > Margin dalam CSS Tailwind hlm >
div >
badan >
di sini:
Output di atas menunjukkan bahawa margin telah ditambahkan ke bahagian atas bekas.
< div kelas = 'h-96 mb-14 bg-ungu-500' >
< hlm kelas = 'pusat teks teks-5xl' > Margin dalam CSS Tailwind hlm >
div >
badan >
Pengeluaran 
Ia boleh dilihat bahawa margin telah ditambahkan ke bahagian bawah bekas.
< div kelas = 'h-96 ml-14 bg-ungu-500' >
< hlm kelas = 'pusat teks teks-5xl' > Margin dalam CSS Tailwind hlm >
div >
badan >
Pengeluaran 
Output di atas menunjukkan bahawa margin telah ditambahkan di sebelah kiri elemen bekas.
< div kelas = 'h-96 mr-14 bg-purple-500' >
< hlm kelas = 'pusat teks teks-5xl' > Margin dalam CSS Tailwind hlm >
div >
badan >
Pengeluaran 
Seperti yang anda lihat, margin telah ditambah dengan cekap di sebelah kanan bekas. Kesimpulan