Banyak programmer pemula yang belum menyadari, bahwa padding adalah aspek penting dalam membuat aplikasi. Padahal, aspek coding satu ini punya pengaruh besar dalam membangun sebuah aplikasi online maupun offline. Oleh karena itu, simak artikel ini untuk tahu apa itu padding beserta fungsinya!
Apa itu Padding?
Padding adalah sebuah ruang kosong (space) pada area sekitar elemen aplikasi, yang memiliki satuan hitung piksel, persen, em dan lain sebagainya. CSS adalah sistem yang mengatur area kosong ini, untuk bisa Anda sesuaikan dengan kebutuhan tampilan.
Secara proses, ini berguna untuk menggambarkan proses pengisian field, menggunakan karakter pad. Analoginya adalah sama ketika Anda punya 5 kursi kosong yang harus terisi, namun hanya ada 2 peserta. Untuk mengisi 3 kursi tersebut, Anda bisa mengisinya dengan panitia sebagai karakter tambahan.
Jika Anda ingin menjabarkan cara kerja dari proses tersebut, kamu bisa praktek untuk membuat sebuah field kosong. Field tersebut memerlukan 7 karakter untuk terisi, namun nama Anda hanya 5 karakter, misal “Rizal”. Maka, sistem akan mengisi 2 ruang kosong secara otomatis dengan karakter pengisi seperti 0 dan akan menjadi “Rizal00”.
Fungsi Padding
Pada dasarnya, fungsi padding pada HTML dan juga CSS adalah untuk memberikan ruang kosong sebagai batasan, agar tiap elemen terlihat lebih tertata. Agar memberikan hasil yang maksimal, Anda bisa mengatur ruang kosong ini pada 4 sisi sekaligus.
Dengan mengatur jarak antara konten atau elemen satu dengan yang lain, tampilan aplikasi akan terlihat lebih natural dan terstruktur. Sehingga, akan lebih mudah untuk menata tampilan aplikasi atau web. Jadi, pengunjung akan lebih nyaman untuk menggunakan aplikasi atau web tersebut
Perbedaan Padding dan Margin
Walaupun memiliki fungsi untuk memberikan ruang, namun pada dasarnya dua hal ini sangatlah berbeda. Perbedaan yang mencolok adalah masalah unsur warna dari keduanya. Karena pada dasarnya padding adalah properti yang mengikuti pewarnaan background, sedangkan margin tidak memiliki warna.
Selain itu, penempatan kedua hal tersebut juga berbeda. Tentunya, untuk sebuah ruang kosong, ruang lingkupnya untuk mengatur sebuah elemen maupun objek tertentu dalam sebuah border. Sedangkan margin berada pada lapisan terluar, yang mencakup seluruh elemen atau objek, border, dan juga ruang kosong itu sendiri.
Cara Penulisan Padding yang Benar
Pada dasarnya, penulisan padding adalah hal yang cukup penting, yang bisa Anda tulis dalam metode, yaitu melalui pengaturan standar CSS atau shorthand notation. Untuk lebih jelasnya, simak penjelasan dibawah ini!
1. Penulisan Standar CSS
Secara umum, penulisan padding pada HTML biasanya berada dalam sebuah tag, contohnya “div” dengan elemen properti adalah “style”. Anda bisa menerapkannya pada semua sisi maupun pada sebagian sisi saja. Format penulisannya kira-kira akan seperti ini:
Format penulisan individual untuk tiap sisi:
padding-top: nominal ukuran | satuan.
padding-right: nominal ukuran | satuan.
padding-bottom: nominal ukuran | satuan.
padding-left: nominal ukuran | satuan.
Contohnya:
padding-top: 15px;
padding-right: 10px;
padding-bottom: 5px;
padding-left: 10px;
Contoh coding simple yang bisa Anda coba:
<html>
<head>
<meta charset="UTF-8">
<title>Belajar CSS</title>
<style>
p {
border: 3px solid black;
padding-top: 10px
padding-right: 5px
padding-bottom: 20px
padding-left: 5px
}
</style>
</head>
<body>
<p>Ceritanya Konten yang Anda Buat</p>
</body>
</html>
2. Penulisan Properti Padding Shorthand Notation
Pada dasarnya, skema penulisan ini adalah cara menulis syntax dengan singkat. Misalnya kamu bisa menulisnya dengan format seperti ini:
- Format penulisan saat semua sisi sama
padding: nominal | satuan
Contohnya :
padding: 10%;- Ukuran sama hanya pada dua sisi yang berhadapan
padding: nominal (atas-bawah) | satuan | nominal (kanan-kiri) | satuan
Contohnya:
padding: 10px 5px;- Penulisan saat ada 3 ukuran berbeda. Misalnya kanan kiri sama, namun atas bawah beda, seperti pada contoh sebelumnya. Maka, Anda bisa menulisnya dengan format ini:
padding: nominal (atas) | satuan | nominal (kanan-kiri) | satuan | nominal (bawah) | satuan
Contohnya:
padding: 10px 5px; 20px;Sudah Paham Apa Itu Padding?
Jadi, padding adalah ruang kosong di sekitar elemen aplikasi yang berfungsi sebagai batasan, agar tampilan website lebih rapi dan tertata. Cara penulisannya terbagi atas 2 metode, yakni menggunakan standar CSS atau dengan syntax yang singkat.
I’m an experienced SEO Specialist who can grow a website through organic channel. I’m also passionate about digital marketing and web development