Bagaimana untuk Menambah Padding Mendatar dan Menegak dalam Tailwind?

Bagaimana Untuk Menambah Padding Mendatar Dan Menegak Dalam Tailwind



Dalam CSS Tailwind, padding ialah ruang antara kandungan elemen tertentu dan sempadannya. Pelapik mendatar ialah ruang di sebelah kiri dan kanan elemen, sedangkan pelapik menegak ialah ruang di bahagian atas dan bawah sesuatu elemen. Tailwind menawarkan pelbagai kelas utiliti untuk menambah pelapik mendatar atau menegak pada elemen yang dikehendaki.

Artikel ini akan menggambarkan:







Bagaimana untuk Menambah Padding Mendatar dalam Tailwind?

Untuk menambah padding mendatar pada elemen dalam Tailwind, kelas 'px-' digunakan dengan elemen yang dikehendaki dalam program HTML. Pengguna boleh menentukan nilai yang berbeza untuk saiz padding. Kelas ini menambah padding di sepanjang paksi-x iaitu pada kedua-dua belah kiri dan kanan elemen.



Sintaks



< unsur kelas = 'px-0 ...' > ... unsur >


Di sini 'px' mewakili 'paksi-x' atau 'lapik mendatar'.





Contoh: Menggunakan Pelapik Mendatar pada Elemen HTML

Dalam contoh ini, kami akan menggunakan ' px-20 kelas utiliti dengan '

” elemen untuk menambah padding mendatar padanya:



< badan >

< div kelas = 'bg-merah jambu-600 px-20 w-maks' >
Padding dalam CSS Tailwind
div >

badan >


Pengeluaran


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

Bagaimana untuk Menambah Padding Menegak dalam Tailwind?

Untuk menambah padding menegak pada elemen dalam Tailwind, gunakan ' py- ” kelas utiliti dengan elemen khusus dalam program HTML. Kelas ini menambah padding di sepanjang paksi-y iaitu pada kedua-dua bahagian atas dan bawah elemen.

Sintaks

< unsur kelas = 'py-0 ...' > ... unsur >


Di sini 'py' mewakili 'paksi-y' atau 'lapik menegak'.

Contoh: Menggunakan Pelapik Menegak pada Elemen HTML

Dalam contoh ini, kami akan menggunakan ' py-20 kelas utiliti dengan '

” elemen untuk menambah padding menegak kepadanya:

< badan >

< div kelas = 'bg-merah jambu-600 py-20 w-maks' >
Padding dalam CSS Tailwind
div >

badan >


Pengeluaran


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

Kesimpulan

Untuk menambah pelapik mendatar dan menegak dalam Tailwind, “ px- ” dan “ py- ” kelas utiliti digunakan dengan elemen yang dikehendaki dalam program HTML masing-masing. Pengguna boleh menentukan nilai yang berbeza untuk menggunakan padding di kiri dan kanan atau atas dan bawah elemen. Artikel ini telah menggambarkan kaedah lengkap untuk menggunakan pelapik mendatar dan menegak dalam Tailwind.