Bagaimana untuk Menambah Padding pada Satu Sisi dalam Tailwind?

Bagaimana Untuk Menambah Padding Pada Satu Sisi Dalam Tailwind



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'

” elemen untuk menambah 10 unit padding di bahagian atasnya:

< badan >

< 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.

Contoh 2: Tambah Padding pada Bahagian Bawah Elemen

Dalam contoh ini, kami akan menggunakan ' pb-10 'kelas dalam'

” untuk menambah 10 unit padding di bahagian bawahnya:

< badan >

< 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.

Contoh 3: Tambah Padding di sebelah Kanan Elemen

Dalam contoh ini, kami akan menggunakan ' pr-10 'kelas dalam'

” elemen untuk menambah 10 unit padding di sebelah kanannya:

< badan >

< 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.

Contoh 4: Tambah Padding di Kiri Elemen

Dalam contoh ini, kami akan menggunakan ' pl-10 'kelas dalam'

” untuk menambah 10 unit padding di sebelah kirinya:

< badan >

< 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

Untuk menambah padding pada satu sisi elemen dalam Tailwind, pelbagai kelas utiliti boleh digunakan, seperti ' pl- ”, “ pr- ”, “ pt- ”, dan “ pb- ”. Kelas ini menambah padding pada bahagian kiri, kanan, atas dan bawah elemen tertentu masing-masing. Pengguna boleh menentukan nilai yang berbeza untuk saiz padding. Blog ini telah menunjukkan contoh untuk menambah padding pada satu sisi elemen dalam Tailwind CSS.