Bagaimana Cara Menambahkan Bantalan Horizontal dan Vertikal di Tailwind?

Bagaimana Cara Menambahkan Bantalan Horizontal Dan Vertikal Di Tailwind



Di Tailwind CSS, lapisan adalah ruang antara konten elemen tertentu dan perbatasannya. Bantalan horizontal adalah ruang di sisi kiri dan kanan elemen, sedangkan bantalan vertikal adalah ruang di bagian atas dan bawah elemen. Tailwind menawarkan berbagai kelas utilitas untuk menambahkan padding horizontal atau vertikal ke elemen yang diinginkan.

Artikel ini akan menggambarkan:







Bagaimana Cara Menambahkan Padding Horizontal di Tailwind?

Untuk menambahkan padding horizontal ke elemen di Tailwind, class “px-” digunakan dengan elemen yang diinginkan di program HTML. Pengguna dapat menentukan nilai yang berbeda untuk ukuran padding. Kelas ini menambahkan bantalan di sepanjang sumbu x, yaitu di sisi kiri dan kanan elemen.



Sintaksis



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


Di sini 'px' mewakili 'sumbu x' atau 'padding horizontal'.





Contoh: Menerapkan Padding Horizontal ke Elemen HTML

Dalam contoh ini, kita akan menggunakan “ px-20 ” kelas utilitas dengan “

” elemen untuk menambahkan padding horizontal ke dalamnya:



< tubuh >

< div kelas = 'bg-merah muda-600 px-20 w-max' >
Lapisan di dalam CSS penarik
div >

tubuh >


Keluaran


Output di atas menunjukkan bantalan di sisi kiri dan kanan wadah. Ini menunjukkan bahwa padding horizontal telah berhasil diterapkan ke elemen container.

Bagaimana Cara Menambahkan Padding Vertikal di Tailwind?

Untuk menambahkan padding vertikal ke elemen di Tailwind, gunakan tombol “ py- ” kelas utilitas dengan elemen spesifik dalam program HTML. Kelas ini menambahkan bantalan di sepanjang sumbu y, yaitu di sisi atas dan bawah elemen.

Sintaksis

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


Di sini 'py' mewakili 'sumbu y' atau 'padding vertikal'.

Contoh: Menerapkan Padding Vertikal ke Elemen HTML

Dalam contoh ini, kita akan menggunakan “ py-20 ” kelas utilitas dengan “

” elemen untuk menambahkan padding vertikal ke dalamnya:

< tubuh >

< div kelas = 'bg-merah muda-600 py-20 w-max' >
Lapisan di dalam CSS penarik
div >

tubuh >


Keluaran


Output di atas menunjukkan padding ke sisi atas dan bawah wadah. Hal ini menunjukkan bahwa padding vertikal telah diterapkan secara efektif pada elemen container.

Kesimpulan

Untuk menambahkan padding horizontal dan vertikal di Tailwind, tombol “ px- ' Dan ' py- ” kelas utilitas digunakan dengan elemen yang diinginkan dalam program HTML masing-masing. Pengguna dapat menentukan nilai yang berbeda untuk menerapkan padding ke kiri dan kanan atau atas dan bawah elemen. Artikel ini telah mengilustrasikan metode lengkap untuk menerapkan padding horizontal dan vertikal di Tailwind.