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-
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 ' Untuk menambah padding menegak pada elemen dalam Tailwind, gunakan ' py- Sintaks Contoh: Menggunakan Pelapik Menegak pada Elemen HTML Dalam contoh ini, kami akan menggunakan ' py-20 kelas utiliti dengan ' Untuk menambah pelapik mendatar dan menegak dalam Tailwind, “ px-
< 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?
Di sini 'py' mewakili 'paksi-y' atau 'lapik menegak'.
< 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