Pengertian Padding
Padding merupakan sebuah istilah ruang kosong yang sering anda temukan di dunia Cascading Style Sheet (CSS). Ruang kosong yang ditemukan antara konten dapat menjadi lebih teratur dan menarik dengan adanya padding. Setiap kontennya dapat dipisahkan secara baik pada website sehingga layout tertata dengan rapi. Padding akan sangat mempengaruhi template yang dibuat pada CSS.
Menurut L. Erawan, dalam bukunya yang berjudul Diktat CSS, padding merupakan sebuah area kosong di antara batas dan konten dari elemen Hyper Text Markup Language (HTML). Tiap elemen dari HTML memiliki empat sisi padding, yaitu padding atas, padding kanan, padding bawah, dan padding kiri.
Penggunaan padding dapat di analogikan seperti kondisi kursi kosong. Jika anda memiliki 5 kursi kosong yang harus terisi, namun hanya ada 2 peserta yang tersedia, bagaimana dengan 3 kursi lainnya? Tentunya anda akan mengisi 3 kursi tersebut dengan panitia sebagai karakter tambahan.
Jika cara kerja dari proses tersebut ingin dijabarkan, anda dapat mempraktekannya pada field kosong. Field memerlukan 7 karakter terisi sedangkan nama anda hanya memiliki 5 karakter, misalnya Ragil. Maka, sisem akan mengisi 2 karakter kosong itu dengan karakter pengisi, misalnya 0. Field tersebut akan terisi menjadi Ragil00.
Padding sering disamakan dengan margin. Keduanya memang memiliki fungsi yang sama, yaitu untuk memberikan ruang pada halaman website. Namun, keduanya memiliki detail kerja yang berbeda dan saling melengkapi.
Margin digunakan untuk menata letak dari sisi luar yang mencakup seluruh elemen, objek, border, dan/atau ruang kosong itu sendiri, sedangkan padding melakukan penataan pada sisi dalam. Selain itu, margin umumnya tidak memiliki warna, sedangkan padding dapat menggunakan warna sesuai dengan warna background halamannya.
Fungsi Padding
Secara garis besar, fungsi padding pada HTML dan CSS adalah untuk memberikan ruang kosong sebagai batasan. Hal ini bertujuan untuk setiap elemen dalam halaman website terlihat lebih tertata dengan baik. Padding yang digunakan pun dapat diletakan pada setiap sisinya, diantaranya adalah :
- Padding Top, untuk mengatur jarak dibagian atas
- Padding Right, untuk mengatur jarak dibagian kanan
- Padding Bottom, untuk mengatur jarak dibagian bawah
- Padding Left, untuk mengatur jarak dibagian kiri
Urutan dari setiap padding akan selalu sama, yaitu atas, kanan, bawah, dan kiri. Untuk mempermudah penghafalan, anda dapat mengingat arah jarum jam dan dimulai dari atas. Sebuah singkatan yang sering digunakan untuk mempermudah ingatan terhadap urutan ini adalah TRouBLe, atau singkatan dari Top, Right, Bottom, dan Left.
Dengan menambahkan padding, website anda akan lebih teratur dan menambah kenyamanan pengunjung saat bermain ke halaman tersebut. Tampilan juga akan terkesan mejadi lebih natural dan terstruktur.
Sintaks Padding
Padding individu dapat digunakan untuk mengatur padding yang lebih spesifik atau mendetail. Menurut Muhamad Chotim dalam bukunya yang berjudul CSS Tutorial, sintaks padding indivdu dapat ditulis demikian :
- Padding-top : length | percent ;
- Padding-right: length | percent ;
- Padding-bottom : length | percent ;
- Padding-left : length | percent ;
Setiap sintaks padding tersebut memilik keterangan sebagai berikut, yaitu :
- Value default untuk setiap properti adalah “o”
- Value untuk mengatur nilai margin dapat berupa nilai panjang dan persen
- Value berupa panjang dapat menggunakan satuan px, em, atau cm
- Value berupa persen dapat menghasilkan nilai margin yang dihitung dari persentasi area disekelilingnya
Selain ditulis secara individu, anda dapat menulis nilai padding yang lebih ringkas dengan properti padding, yaitu padding: <padding-top> <padding-right> <padding-bottom> <padding-left>;. Keterangan terhadap sintaks tersebut adalah :
- Properti padding dapat digunakan untuk menentukan nilai padding dari keempat sisi elemen HTML
- Value dari properti bisa terdiri dari satu sampai empat nilai, dimana penggunaannya sama dengan property margin dan property border
Oleh sebab itu, jika ditulis secara individual, sintaks yang dapat digunakan adalah padding-top: 30px; padding-right: 40 px; padding-bottom: 50 px; padding-left: 60 px;. Namun, jika anda ingin menuliskannya secara sekaligus, maka sintaks yang dapat digunakana adalah padding: 30px 40px 50px 60px, dengan urutan top (atas), right (kanan), bottom (bawah), dan left (kiri).
Properti padding juga dapat memuat kurang dari empat nilai, misalnya :
- Padding: 5px 10px 15px, berarti :
- Padding atas 5px
- Padding kanan dan padding kiri 10px
- Padding bawah 15px
- Padding: 15px 20px, berarti :
- Padding atas dan bawah 15px
- Padding kanan dan kiri 20px
- Padding: 30px, berarti :
- Keempat sudut memiliki padding 30px
Pertimbangan besar nilai setiap paddingnya dapat disesuai dengan konsep dan kenyamanan pengguna. Pastikan ukurannya sudah sesuai dan membuat pengguna dapat membaca isi website dengan nyaman. Jarak artikel dengan garis tepi akan membuat artikel menjadi lebih mudah dibaca dan elegan.
Contoh Padding
Penggunaan padding pada halaman website sederhana dapat dimulai dari pengaplikasian sintaks padding secara keseluruhan.
Contoh penggunaan sintaks properti padding adalah :
<html>
<head>
<title>pengertian padding</title>
<body>
<b>ini merupakan contoh halaman yang dibuat menggunakan padding</b>
<h1 style="border: #0FF; border-width: 3px; border-style: solid; padding: 20px; font-size: 14px;">ini adalah halaman untuk percobaan padding</h1>
</body>
</head>
</html>
Contoh penggunaan sintkas individu padding adalah:
<html>
<head>
<title>pengertian padding</title>
<body>
<b>ini merupakan contoh halaman yang dibuat menggunakan padding</b>
<h1 style=”border: #0FF; border-width: 3px; border-style: solid; padding: 30px 40px 50px 60px; font-size: 14px;”>ini adalah halaman untuk percobaan padding</h1>
</body>
</head>
</html>
