Sekilas Mengenai Padding dan Margin

Saat kita sedang mengedit HTML, baik HTML template blog maupun HTML gadget pada sidebar, tak jarang kita menemui istilah padding dan margin di suatu kode tertentu. Sebenarnya apa sih padding dan margin itu?

Padding dan margin merupakan suatu property yang berguna untuk membuat batas ruang dalam dan ruang luar dari sebuah elemen objek. Objeknya dapat berupa gambar, teks, kode HTML, atau apa saja. Objek ini akan terlihat jelas jika diberi border (garis batas) atau background.

Padding ialah ruang yang berada di bagian dalam dari sebuah elemen. Sedangkan margin adalah kebalikannya yakni ruang yang berada di bagian luar dari elemen tersebut. Nah, sebagai contoh bisa diperhatikan pada ilustrasi di bawah ini.

Bertambahnya nilai atau value pada property padding berarti akan menambah lebar dan tinggi suatu elemen. Sedangkan penambahan nilai pada property margin tidak akan menambah lebar dan tinggi suatu elemen.

Untuk melihat perubahan yang terjadi jika property padding diubah nilainya, Sobat dapat melihatnya di sini. Sedangkan untuk melihat perubahan pada property margin bisa dilihat di sini.

Bentuk penulisan untuk property padding dan property margin dapat ditulis secara satu per satu atau individu dan bisa pula dengan disingkat atau diperpendek (shorthand).

Nilai atau value dari property padding dapat ditulis dalam satuan px, pt, em, dan %. Sedangkan nilai untuk property margin bisa ditulis dalam satuan auto, pt, em, dan %.

Berikut contoh penulisan padding secara individu atau satu satu dengan satuan piksel:

padding-top:10px

padding-right:20px

padding-bottom:30px

padding-left:40px

Penulisan property dan value di atas dapat disingkat atau diperpendek (shorthand) menjadi seperti di bawah ini:

padding:10px 20px 30px 40px

Pembacaan nilai-nilainya adalah searah jarum jam. Dimulai dari arah kiri ke kanan yaitu atas, kanan, bawah, dan kiri. Untuk mudah mengingatnya, nilai pertama kita anggap ada di posisi jam 12 (atas), nilai ke-dua ialah jam 3 (kanan), nilai ke-tiga adalah jam 6 (bawah), dan nilai ke-empat untuk jam 9 (kiri).

Bila nilai keempat sisi padding adalah sama, misalnya sebesar 20 piksel, maka penulisannya dapat diperpendek menjadi seperti ini, padding:20px.

Sedangkan jika property padding dua sisi yang berlawanan memiliki nilai yang sama, maka bentuk penulisannya dapat ditulis sebagai berikut:

padding:10px 30px

Kode di atas artinya nilai untuk padding atas (top) dan bawah (bottom) adalah sama yakni sebesar 10 piksel. Sedangkan nilai padding kanan (right) dan kiri (left) mempunyai nilai yang sama yaitu sebesar 30 piksel.

Untuk penulisan value dan property margin sendiri tidak jauh berbeda dengan cara penulisan padding, bisa ditulis secara individu seperti contoh di bawah ini:

margin-top:20px

margin-right:30px

margin-bottom:20px

margin-left:30px

Secara disingkat atau diperpendek akan menjadi seperti di bawah ini:

margin:20px 30px 20px 30px atau margin:20px 30px