Kebanyakan seorang programmer pemula belum menyadari bahwa padding adalah salah satu aspek penting dalam membuat sebuah aplikasi. Padding sebagai salah satu aspek coding memiliki pengaruh besar untuk membangun aplikasi online maupun offline. Nah, artikel ini akan membahas tentang apa itu padding mulai dari pengertian hingga cara penulisannya.
Apa itu Padding
Padding adalah sebuah space atau ruang kosong pada area sekitar elemen aplikasi yang memiliki satuan piksel, persen, em, dan lainnya. Dalam hal ini kamu harus mengetahui juga mengenai CSS. CSS adalah sistem yang mengatur space atau area kosong untuk bisa kamu sesuaikan dengan kebutuhan display atau tampilan. Proses ini berguna untuk menggambarkan pengisian field menggunakan karakter pad.
Jika dianalogikan, bayangkan kamu memiliki target menjual 5 tiket konser, namun hanya terjual 2 tiket. Nah, kamu bisa menjual 3 tiket sisanya terhadap panitia sebagai karakter tambahan. Kamu bisa membayangkan proses tersebut dengan praktik membuat sebuah field kosong. Field tersebut memerlukan 8 karakter untuk terisi, namun nama kamu hanya 6 karakter, misal ‘Belina’. Maka sistem akan mengisi 2 ruang kosong secara otomatis dengan karakter pengisi seperti 0 dan akan menjadi ‘Belina00’.
Baca juga| HTTP Strict Transport Security (HSTS): Pengertian, Fungsi, Cara Kerja
Image: Freepik
Fungsi Padding
Padding memiliki fungsi pada HTML dan CSS, yaitu untuk memberikan ruang kosong sebagai batasan agar setiap elemen dapat lebih terlihat tertata. Dengan demikian, tentu hasilnya akan maksimal dan kamu bisa mengatur ruang kosong ini pada 4 sisi sekaligus.
Dengan mengatur jarak antara elemen satu dengan lainnya, tampilan aplikasi akan terlihat lebih terstruktur dan enak dipandang. Sehingga, kamu akan lebih mudah untuk menata tampilan aplikasi atau web. Hasilnya pun pengunjung akan lebih nyaman ketika menggunakan aplikasi atau web tersebut.
Perbedaan Padding dengan Margin
Padding dan margin sama-sama memiliki fungsi untuk memberikan ruang, namun pada dasarnya kedua hal ini merupakan suatu hal yang berbeda. Salah satu perbedaan yang mencolok adalah masalah unsur warna dari padding dan margin. Pada dasarnya, padding adalah properti yang mengikuti pewarnaan pada background, sedangkan margin tidak memiliki warna. Selain itu, margin dan padding memiliki penempatan yang berbeda. Untuk sebuah ruang kosong, ruang lingkup untuk mengatur sebuah elemen maupun objek atau elemen tertentu dalam border. Sedangkan margin berada pada lapisan paling luar yang mencakup seluruh objek, elemen, dan ruang kosong itu sendiri.
Image: Freepik
Cara Penulisan Padding
Penulisan padding adalah hal yang cukup penting, kamu bisa menulisnya dalam metode pengaturan standar CSS atau shorthand notation. Nah, untuk lebih jelas kamu bisa menyimak rangkuman di bawah ini.
1. Penulisan Standar CSS
Umumnya, penulisan padding pada HTML biasanya berada dalam sebuah tag contohnya ‘div’ dengan elemen properti adalah style. Kamu bisa menerapkannya pada semua sisi atau sebagian sisi. Format penulisannya kurang lebih akan seperti di bawah ini.
Format penulisan individual untuk setiap sisi:
- padding-top: nominal ukuran|satuan.
- padding-right: nominal ukuran|satuan.
- padding-bottom: nominal ukuran|satuan.
- padding-left: nominal ukuran|satuan.
Contoh:
- padding-top: 15px;
- padding-right: 10px;
- padding-bottom: 5px;
- padding-left: 10px;
Contoh coding sederhana yang bisa kamu buat:
Baca juga| Apa itu NoSQL? Berikut Penjelasan Lengkapnya!
2. Penulisan Properti Padding Shorthand Notation
Pada prinsipnya, skema penulisan ini adalah cara menulis syntax dengan singkat. Misalnya ketika kamu bisa menulisnya dengan format seperti di bawah ini.
- Format penulisan saat semua sisi sama
padding: nominal|satuan
Contohnya:
padding: 10%;
- Ukuran sama hanya pada dua sisi yang berhadapan
padding: nominal (atas-batas)|satuan|nominal(kanan-kiri)|satuan
contohnya:
padding: 10x 5px;
- Penulisan saat ada 3 ukuran berbeda. Misal, kanan kiri sama, namun atas bawah berbeda, seperti pada contoh sebelumnya. Maka, kamu bisa menulisnya dengan format:
padding: nominal (atas)|satuan|nominal (kanan-kiri)|satuan|nominal (bawah)|satuan
contohnya:
padding: 10px 5px; 20px;
Baca juga| Mengenal Software As A Service (SaaS) Dan Contoh Aplikasinya
Nah, itu dia pembahasan mengenai apa itu padding. Padding adalah ruang kosong di sekitar elemen aplikasi yang berfungsi sebagai batasan, tujuannya agar tampilan website menjadi lebih tertata dan terstruktur. Cara penulisan padding bisa menggunakan 2 metode, yaitu menggunakan standar CSS atau dengan metode syntax yang singkat.
