Bagaimana Cara Menambahkan Margin Horizontal dan Vertikal di Tailwind?

Bagaimana Cara Menambahkan Margin Horizontal Dan Vertikal Di Tailwind



Tailwind CSS menyediakan “ batas ” kelas utilitas yang memungkinkan pengguna untuk mengontrol jarak di sekitar elemen. Itu margin horisontal menambahkan ruang ke sisi kiri dan kanan elemen, sedangkan a margin vertikal menambahkan ruang ke bagian atas dan bawah elemen. Tailwind menawarkan berbagai kelas utilitas untuk menambahkan margin horizontal atau vertikal ke elemen yang diinginkan.

Artikel ini akan memberikan contoh:







Bagaimana Cara Menambahkan Margin Horizontal di Tailwind?

Untuk menambahkan margin horizontal ke elemen di Tailwind, tombol “ mx- ” digunakan dengan elemen yang diinginkan dalam program HTML. Pengguna dapat menentukan nilai yang berbeda untuk ukuran margin. Kelas ini menambahkan margin sepanjang sumbu x (sisi kanan dan kiri).



Sintaksis



< elemen kelas = 'mx- ...' > ... elemen >


Di sini, 'mx' mewakili 'sumbu x' atau 'margin horizontal'. Pastikan untuk mengganti “” dengan nilai yang valid, seperti “5”, “14”, dll.





Contoh: Menerapkan Margin Horizontal ke Elemen HTML

Dalam contoh ini, kita akan menggunakan “ mx-10 ” kelas utilitas dengan “

” elemen untuk menambahkan margin horizontal ke dalamnya:



< tubuh >

< div kelas = 'h-layar mx-10 bg-ungu-500' >

< P kelas = 'pusat teks teks-5xl' > Batas di dalam CSS penarik P >

div >

tubuh >


Keluaran


Output di atas menunjukkan margin ke sisi kiri dan kanan wadah. Ini menunjukkan bahwa margin horizontal telah berhasil diterapkan ke elemen penampung.

Bagaimana Cara Menambahkan Margin Vertikal di Tailwind?

Untuk menambahkan margin vertikal ke elemen di Tailwind, gunakan tombol “ saya- ” kelas utilitas dengan elemen spesifik dalam program HTML. Kelas ini menambahkan margin sepanjang sumbu y (sisi atas dan bawah).

Sintaksis

< elemen kelas = 'saya- ...' > ... elemen >


Di sini, 'saya' mewakili 'sumbu y' atau 'margin vertikal'. Pastikan untuk mengganti “” dengan nilai yang valid, seperti “6”, “12”, dll.

Contoh: Menerapkan Margin Vertikal ke Elemen HTML

Dalam contoh ini, kita akan menggunakan “ saya-10 ” kelas utilitas dengan “

” elemen untuk menambahkan margin vertikal ke dalamnya:

< tubuh >

< div kelas = 'h-96 saya-10 bg-ungu-500' >

< P kelas = 'pusat teks teks-5xl' > Batas di dalam CSS penarik P >

div >

tubuh >


Keluaran


Output di atas menunjukkan margin ke sisi atas dan bawah wadah. Ini menunjukkan bahwa margin vertikal telah diterapkan secara efektif pada elemen wadah.

Kesimpulan

Untuk menambahkan margin horizontal dan vertikal di Tailwind, tombol “ mx- ' Dan ' saya- ” kelas utilitas digunakan dengan elemen yang diinginkan dalam program HTML masing-masing. Pengguna dapat menentukan nilai yang berbeda untuk menerapkan margin ke kiri dan kanan atau atas dan bawah elemen. Tulisan ini telah mencontohkan metode penerapan margin horizontal dan vertikal di Tailwind.