Padding adalah ruang kosong di dalam elemen — jarak antara konten dengan tepi kotaknya sendiri. Bedanya dengan margin: margin mengatur jarak di luar kotak (ke elemen lain), padding mengatur jarak di dalam kotak.

🧪 Tebakan cepat — padding atau margin? Teks di tombolmu nempel banget ke pinggir tombol. Yang perlu ditambah padding atau margin? Jawabannya: padding — ruang di dalam tombol. Kalau tombolnya yang kedeketan sama elemen lain, baru itu urusan margin.

Coba beli kue di box kardus. Kuenya ada di tengah, sekelilingnya ada ruang kosong sampai dinding kardus — biar kuenya gak gepeng nempel kotak pas digerakkin. Itu padding. Beda sama margin yang ruang DI LUAR kotak (jarak ke kotak kue lain), padding itu ruang DI DALAM kotak (jarak antara kue dengan dinding).

💡 Aturan praktis. Tombol tanpa padding = klikin huruf saja (jelek + susah di-tap di mobile). Padding 8px 16px (vertikal-horizontal) udah jadi resep standar tombol nyaman dipencet jari.

Berikut contoh penggunaan properti padding:

padding: 40px 30px 30px 30px;

Shorthand sama kayak margin: 4 nilai = atas-kanan-bawah-kiri (clockwise).

🎭 Analogi sehari-hari

padding = busa di dalam kostum boneka maskot. Ruang di antara kulit boneka (border) dengan badan asli (content). Beda dengan margin yang ruang di luar kostum.

⚠️ Jebakan yang sering ditemui

• Padding masuk box dimension kalau box-sizing: content-box (default). 100px width + 20px padding = 140px total. Pakai border-box global (best practice).
• Padding TIDAK collapse seperti margin — selalu dijumlah.
• Padding di inline element untuk top/bottom JALAN tapi tidak push elemen sekitar (overlap visual).
• Padding bisa percentage dari LEBAR parent — bahkan untuk padding-top. Sering dipakai untuk aspect-ratio hack: padding-top: 56.25% = 16:9.
• Background warna ikut padding area — bedakan dengan margin yang transparan.
• padding: 1em relatif font-size elemen sendiri — bukan parent.

🎯 padding vs margin — pilih yang mana?

• Ruang DALAM kotak (jarak konten ke border) → padding
• Ruang LUAR kotak (jarak ke elemen tetangga) → margin
• Tombol nyaman di-tap (target click area) → padding (klik area = padding + content, BUKAN margin)
• Background warna mengikuti → padding (margin transparan)
• Centering elemen block → margin: 0 auto
• Vertical spacing antar paragraf → margin-bottom (collapse-aware)

Patokan: kalau kamu mau elemen "lebih besar" + background ikut → padding. Kalau mau jarak ke tetangga → margin.