Di Tailwind CSS, a batas digunakan untuk mengontrol jarak di sekitar elemen tertentu. Itu menambah ruang antara elemen yang diterapkan dan elemen sekitarnya. Tailwind CSS menyediakan seperangkat utilitas margin dan nilai margin yang memungkinkan pengguna menyesuaikan jarak di sekitar elemen yang diinginkan. Selain itu, pengguna dapat menambahkan margin ke satu sisi, seperti bagian atas, bawah, kiri, atau kanan elemen tertentu.
Blog ini akan mendemonstrasikan contoh untuk menambahkan margin ke satu sisi elemen di Tailwind CSS.
Bagaimana Cara Menambahkan Margin ke Satu Sisi di Tailwind?
Untuk menambahkan margin ke satu sisi elemen di Tailwind, kelas utilitas berikut dapat digunakan:
Untuk memahaminya dengan lebih baik, lihat contoh yang diberikan di bawah ini.
Contoh 1: Tambahkan Margin ke Bagian Atas Elemen
Dalam contoh ini, kita akan menggunakan “ mt-14 ” kelas utilitas di “ Keluaran Contoh 2: Tambahkan Margin ke Bagian Bawah Elemen Dalam contoh ini, kita akan menggunakan “ mb-14 ” kelas di “ Contoh 3: Tambahkan Margin ke Kiri Elemen Dalam contoh ini, kita akan menggunakan “ ml-14 ” kelas di “ Contoh 4: Tambahkan Margin ke Kanan Elemen Dalam contoh ini, kita akan menggunakan “ mr-14 ” kelas di “ Untuk menambahkan margin ke satu sisi elemen di Tailwind, berbagai kelas utilitas dapat digunakan, seperti “ ml-
< div kelas = 'h-96 mt-14 bg-ungu-500' >
< P kelas = 'pusat teks teks-5xl' > Batas di dalam CSS penarik P >
div >
tubuh >
Di Sini:
Output di atas menunjukkan bahwa margin telah ditambahkan ke bagian atas wadah.
< div kelas = 'h-96 mb-14 bg-ungu-500' >
< P kelas = 'pusat teks teks-5xl' > Batas di dalam CSS penarik P >
div >
tubuh >
Keluaran
Dapat dilihat bahwa margin telah ditambahkan ke bagian bawah wadah.
< div kelas = 'h-96 ml-14 bg-ungu-500' >
< P kelas = 'pusat teks teks-5xl' > Batas di dalam CSS penarik P >
div >
tubuh >
Keluaran
Output di atas menunjukkan bahwa margin telah ditambahkan di sebelah kiri elemen container.
< div kelas = 'h-96 mr-14 bg-ungu-500' >
< P kelas = 'pusat teks teks-5xl' > Batas di dalam CSS penarik P >
div >
tubuh >
Keluaran
Seperti yang Anda lihat, margin telah ditambahkan secara efisien ke kanan wadah. Kesimpulan