Buat yang masih suka bingung perbedaan antara PADDING dan MARGIN dalam pemakaiannya di CSS ataupun HTML, semoga penjelasan saya yang berikut ini membantu pemahaman antara hal tersebut. Hitung-hitung buat contekan saya juga kalo lupa hehe
Ada pepatah mengatakan, sebuah lukisan bisa menceritakan ribuan kata, nah coba lihat gambar dibawah:
Saya rasa, cukup mencerna gambar diatas selama beberapa menit sudah cukup menceritakan perbedaan antara PADDING dan MARGIN. Yah, gambar ini sudah menghemat ratusan kata kan? Tapi ijinkan saya mendeskripsikan lagi menurut hemat saya, apa sebenarnya perbedaan PADDING dan MARGIN ini.
Misalkan kita membuat satu table dengan Margin 5px, maka space kosong dari border table ke arah luar sebesar 5px tadi adalah MARGIN. Lalu jika membuat satu table dengan padding 5px, maka space kosong antara border dengan content adalah PADDING, it’s as simple as that. Gunakan border pada table kamu dan akan lebih kelihatan jelas perbedaannya.
Semoga penjelasan saya membantu dan bisa menjadi acuan dalam mendesign HTML dan CSS, untuk kapan lebih baik menggunakan MARGIN atau PADDING.
sumber lengkap + gambar : http://www.w3.org/TR/css3-background/