HTML & CSS: Padding

Cara kerja padding mirip dengan margin, tapi kalau margin mengatur jarak elemen satu sama lain, tugas padding adalah mengatur jarak konten -misalnya teks atau gambar- dengan elemen. Jarak padding bisa diatur dalam pixel, em, persen dan lain-lain. Selain itu, padding menggunakan posisi sama seperti margin dan border, empat posisi itu adalah atas: 'padding-top:...;', kanan: 'padding-right:...;', bawah: 'padding-bottom:...;' dan kiri: 'padding-left:...;'. Tapi penulisan ini tentu tidak terlalu efektif dan cenderung memakan waktu lama. Solusinya adalah menggunakan shorthand: 'padding:atas kanan bawah kiri;'. Ganti tulisan atas-kiri dengan nilai sesuai keinginan anda, selalu pastikan untuk memberi spasi diantara masing-masing nilai. Contoh:

padding-top:20px;

padding-right:0;

padding-bottom:20px;

padding-left:50px;

Contoh dengan shorthand:

padding:100px 0 50px 10px;

Pada diagram dibawah, padding ditandai dengan warna hijau. Posisinya ada diantara konten dan elemen.

Diagram Elemen

Catatan:
Meskipun satuan nilai padding ada beberapa macam, nilai pixel adalah satuan yang paling mudah digunakan. Untuk menghemat ruang, nilai 0px pada padding yang bisa diubah menjadi 0.