Bagaimana untuk Menambah Margin Mendatar dan Menegak dalam Tailwind?

Bagaimana Untuk Menambah Margin Mendatar Dan Menegak Dalam Tailwind



Tailwind CSS menyediakan “ margin ” kelas utiliti yang membolehkan pengguna mengawal jarak di sekeliling elemen. The jidar mendatar menambah ruang di sebelah kiri dan kanan elemen, manakala a margin menegak menambah ruang pada bahagian atas dan bawah elemen. Tailwind menawarkan pelbagai kelas utiliti untuk menambah jidar mendatar atau menegak pada elemen yang dikehendaki.

Artikel ini akan menjadi contoh:







Bagaimana untuk Menambah Margin Mendatar dalam Tailwind?

Untuk menambah margin mendatar pada elemen dalam Tailwind, “ mx- kelas ” digunakan dengan elemen yang dikehendaki dalam program HTML. Pengguna boleh menentukan nilai yang berbeza untuk saiz margin. Kelas ini menambah jidar di sepanjang paksi-x (sisi kanan dan kiri).



Sintaks



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


Di sini, 'mx' mewakili 'paksi-x' atau 'margin mendatar'. Pastikan untuk menggantikan '' dengan mana-mana nilai yang sah, seperti '5', '14' dsb.





Contoh: Menggunakan Margin Mendatar pada Elemen HTML

Dalam contoh ini, kami akan menggunakan ' mx-10 kelas utiliti dengan '

'elemen untuk menambah margin mendatar padanya:



< badan >

< div kelas = 'h-skrin mx-10 bg-purple-500' >

< hlm kelas = 'pusat teks teks-5xl' > Margin dalam CSS Tailwind hlm >

div >

badan >


Pengeluaran


Output di atas menunjukkan margin di sebelah kiri dan kanan bekas. Ini menunjukkan bahawa jidar mendatar telah digunakan pada elemen bekas dengan jayanya.

Bagaimana untuk Menambah Margin Menegak dalam Tailwind?

Untuk menambah jidar menegak pada elemen dalam Tailwind, gunakan ' saya- ” kelas utiliti dengan elemen khusus dalam program HTML. Kelas ini menambah jidar di sepanjang paksi-y (bahagian atas dan bawah).

Sintaks

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


Di sini, 'my' mewakili 'paksi-y' atau 'margin menegak'. Pastikan untuk menggantikan '' dengan mana-mana nilai yang sah, seperti '6', '12' dsb.

Contoh: Menggunakan Margin Menegak pada Elemen HTML

Dalam contoh ini, kami akan menggunakan ' saya-10 kelas utiliti dengan '

” elemen untuk menambah margin menegak padanya:

< badan >

< div kelas = 'h-96 my-10 bg-purple-500' >

< hlm kelas = 'pusat teks teks-5xl' > Margin dalam CSS Tailwind hlm >

div >

badan >


Pengeluaran


Output di atas menunjukkan margin pada bahagian atas dan bawah bekas. Ini menunjukkan bahawa jidar menegak telah digunakan dengan berkesan pada elemen bekas.

Kesimpulan

Untuk menambah margin mendatar dan menegak dalam Tailwind, “ mx- ” dan “ saya- ” kelas utiliti digunakan dengan elemen yang dikehendaki dalam program HTML masing-masing. Pengguna boleh menentukan nilai yang berbeza untuk menggunakan margin pada kiri dan kanan atau atas dan bawah elemen. Tulisan ini telah mencontohkan kaedah menggunakan margin mendatar dan menegak dalam Tailwind.