Bagaimana cara menambahkan Padding ke semua Sisi di Tailwind?

Bagaimana Cara Menambahkan Padding Ke Semua Sisi Di Tailwind



Tailwind CSS adalah kerangka kerja terkenal yang digunakan untuk membuat halaman atau desain web yang dapat disesuaikan dan responsif. Itu juga memungkinkan pengguna untuk mengontrol tata letak dan jarak elemen tanpa menulis CSS khusus apa pun. Padding adalah ruang antara konten elemen tertentu dan perbatasannya. Terkadang, pengguna ingin menerapkan jumlah padding yang sama ke setiap sisi elemen. Tailwind menyediakan class utilitas untuk menerapkan padding ke semua sisi elemen, atau ke sisi tertentu, seperti atas, kanan, bawah, atau kiri.

Artikel ini akan memberikan contoh metode untuk menambahkan padding ke semua sisi elemen di Tailwind.







Bagaimana Cara Menambahkan Padding ke Semua Sisi di Tailwind?

Untuk menambahkan padding ke semua sisi elemen tertentu di Tailwind, buat struktur HTML. Kemudian, gunakan kelas utilitas “p-” dengan elemen tertentu. Diperlukan untuk menentukan nilai yang diinginkan untuk menerapkan padding ke elemen. Selanjutnya, periksa halaman web HTML untuk memastikan perubahan.



Sintaksis



< elemen kelas = 'p-' ... elemen >


Ganti “” dengan angka yang diinginkan, seperti 2, 4, 12, 20, dll.





Contoh

Dalam contoh ini, kami memiliki dua '

” elemen dan kami akan menerapkan dua padding berbeda yaitu “ hal-8 ' Dan ' hal-14 ” pada mereka:



< tubuh >

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

< br >

< div kelas = 'bg-teal-600 p-14 w-max' >
Lapisan di dalam CSS penarik
div >

tubuh >


Di sini, di

pertama:

    • bg-merah muda-600 ” mengatur warna pink ke latar belakang elemen
      .
    • hal-8 ” kelas menambahkan 8 unit bantalan ke semua sisi wadah.
    • w-maks ” mengatur lebar elemen
      ke lebar konten maksimumnya.

Di

kedua:

    • bg-teal-600 ” kelas menyetel warna teal ke latar belakang elemen
      .
    • hal-14 ” kelas menerapkan 14 unit padding ke semua sisi wadah.
    • w-maks ” mengatur lebar elemen
      ke lebar konten maksimumnya.

Keluaran


Menurut output di atas, bantalan yang ditentukan telah diterapkan ke semua sisi kedua wadah.

Kesimpulan

Untuk menambahkan padding ke semua sisi elemen di Tailwind, kelas utilitas “p-” digunakan dengan elemen yang diinginkan di program HTML. Pengguna perlu menentukan nilai spesifik untuk menerapkan padding ke elemen. Untuk verifikasi, periksa halaman web HTML dan pastikan perubahan. Artikel ini telah mencontohkan metode untuk menambahkan padding ke semua sisi elemen di Tailwind.