Bagaimana Cara Menambahkan Margin ke Satu Sisi di Tailwind?

Bagaimana Cara Menambahkan Margin Ke Satu Sisi Di Tailwind



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 “

” elemen untuk menambahkan 14 unit margin di atasnya:

< tubuh >

< 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:



    • h-96 ” mengatur tinggi wadah
      menjadi 96 unit.
    • mt-14 ” kelas menerapkan 14 unit margin ke bagian atas wadah.
    • bg-ungu-500 ” kelas mengatur warna ungu ke latar belakang wadah.

Keluaran


Output di atas menunjukkan bahwa margin telah ditambahkan ke bagian atas wadah.

Contoh 2: Tambahkan Margin ke Bagian Bawah Elemen

Dalam contoh ini, kita akan menggunakan “ mb-14 ” kelas di “

” elemen untuk menambahkan 14 unit margin di bagian bawahnya:

< tubuh >

< 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.

Contoh 3: Tambahkan Margin ke Kiri Elemen

Dalam contoh ini, kita akan menggunakan “ ml-14 ” kelas di “

” elemen untuk menambahkan 14 unit margin di sebelah kirinya:

< tubuh >

< 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.

Contoh 4: Tambahkan Margin ke Kanan Elemen

Dalam contoh ini, kita akan menggunakan “ mr-14 ” kelas di “

” elemen untuk menambahkan 14 unit margin di sebelah kanannya:

< tubuh >

< 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

Untuk menambahkan margin ke satu sisi elemen di Tailwind, berbagai kelas utilitas dapat digunakan, seperti “ ml- ”, “ tuan- ”, “ mt- ', Dan ' mb- ”. Kelas-kelas ini menambahkan margin ke sisi kiri, kanan, atas, dan bawah elemen tertentu. Pengguna dapat menentukan nilai yang berbeda untuk ukuran margin. Blog ini telah mendemonstrasikan contoh untuk menambahkan margin ke satu sisi elemen di Tailwind CSS.