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-
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 “ Untuk menambahkan padding vertikal ke elemen di Tailwind, gunakan tombol “ py- Sintaksis Contoh: Menerapkan Padding Vertikal ke Elemen HTML Dalam contoh ini, kita akan menggunakan “ py-20 ” kelas utilitas dengan “ Untuk menambahkan padding horizontal dan vertikal di Tailwind, tombol “ px-
< 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?
Di sini 'py' mewakili 'sumbu y' atau 'padding vertikal'.
< 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