Dalam CSS Tailwind, padding digunakan untuk menambah ruang antara kandungan elemen tertentu dan sempadannya. Ia menambah jarak tambahan di dalam elemen. CSS Tailwind menyediakan satu set utiliti padding dan nilai padding yang membenarkan pengguna menyesuaikan jarak elemen yang dikehendaki. Selain itu, pengguna boleh menambah padding pada satu sisi, seperti bahagian atas, bawah, kiri atau kanan elemen tertentu.
Blog ini akan menunjukkan contoh untuk menambah padding pada satu sisi elemen dalam Tailwind CSS.
Bagaimana untuk Menambah Padding pada Satu Sisi dalam Tailwind?
Untuk menambah padding pada satu sisi elemen dalam Tailwind, kelas utiliti berikut boleh digunakan:
Untuk memahaminya dengan lebih baik, lihat contoh yang disediakan di bawah.
Contoh 1: Tambah Padding pada Bahagian Atas Elemen
Dalam contoh ini, kami akan menggunakan ' pt-10 'kelas utiliti dalam' Contoh 2: Tambah Padding pada Bahagian Bawah Elemen Dalam contoh ini, kami akan menggunakan ' pb-10 'kelas dalam' Contoh 3: Tambah Padding di sebelah Kanan Elemen Dalam contoh ini, kami akan menggunakan ' pr-10 'kelas dalam' Contoh 4: Tambah Padding di Kiri Elemen Dalam contoh ini, kami akan menggunakan ' pl-10 'kelas dalam' Untuk menambah padding pada satu sisi elemen dalam Tailwind, pelbagai kelas utiliti boleh digunakan, seperti ' pl-
< div kelas = 'bg-pink-600 pt-10 w-maks' >
Padding dalam CSS Tailwind
div >
badan >
Pengeluaran
Output di atas menunjukkan bahawa padding telah ditambah ke bahagian atas bekas.
< div kelas = 'bg-merah jambu-600 pb-10 w-maks' >
Padding dalam CSS Tailwind
div >
badan >
Pengeluaran
Ia boleh dilihat bahawa padding telah ditambah ke bahagian bawah bekas.
< div kelas = 'bg-merah jambu-600 pr-10 w-maks' >
Padding dalam CSS Tailwind
div >
badan >
Pengeluaran
Output di atas menunjukkan bahawa padding telah ditambah di sebelah kanan elemen bekas.
< div kelas = 'bg-merah jambu-600 pl-10 w-maks' >
Padding dalam CSS Tailwind
div >
badan >
Pengeluaran
Ia boleh diperhatikan bahawa padding telah ditambah di sebelah kiri bekas. Kesimpulan