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-
Sintaksis
< elemen kelas = 'mx-
Di sini, 'mx' mewakili 'sumbu x' atau 'margin horizontal'. Pastikan untuk mengganti “
Contoh: Menerapkan Margin Horizontal ke Elemen HTML
Dalam contoh ini, kita akan menggunakan “ mx-10 ” kelas utilitas dengan “ Untuk menambahkan margin vertikal ke elemen di Tailwind, gunakan tombol “ saya- Sintaksis Contoh: Menerapkan Margin Vertikal ke Elemen HTML Dalam contoh ini, kita akan menggunakan “ saya-10 ” kelas utilitas dengan “ Untuk menambahkan margin horizontal dan vertikal di Tailwind, tombol “ mx-
< 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?
Di sini, 'saya' mewakili 'sumbu y' atau 'margin vertikal'. Pastikan untuk mengganti “
< 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