Perbedaan Margin dan Padding di CSS: Jangan Sampai Tertukar!

Konsep Dasar CSS Box Model

Saat baru belajar mendesain website dengan CSS, salah satu kebingungan terbesar adalah mengatur jarak antar elemen. Kapan kita harus memakai margin, dan kapan harus memakai padding? Untuk memahaminya, kamu harus tahu bahwa setiap elemen HTML (seperti gambar, teks, tombol) pada dasarnya adalah sebuah kotak transparan (CSS Box Model).

Padding (Jarak Dalam / Busa Pelindung)

Bayangkan kamu membeli sebuah bingkai foto. Padding adalah jarak antara foto di dalam dengan tepi kayunya (bingkai). Semakin besar padding, semakin jauh fotomu dari pinggiran bingkai.

• Fungsi: Memberikan ruang bernapas di dalam elemen.
• Efek Visual: Jika elemen tersebut memiliki warna background, maka area padding AKAN ikut berwarna.
• Contoh Kasus: Membuat tombol yang berisi teks agar teksnya tidak menabrak garis tepi tombol.

.tombol-keren {
  background-color: blue;
  color: white;
  padding: 10px 20px; /* Atas-Bawah 10px, Kiri-Kanan 20px */
}

Margin (Jarak Luar / Jarak Sosial)

Sekarang, kamu ingin memajang bingkai foto tersebut di dinding, berdampingan dengan bingkai foto lainnya. Margin adalah jarak antara bingkai fotomu dengan bingkai foto milik orang lain.

• Fungsi: Mendorong elemen lain agar menjauh, memberikan jarak di luar garis batas (border) elemen.
• Efek Visual: Area margin 100% transparan. Ia tidak akan pernah terpengaruh oleh warna background elemenmu.
• Contoh Kasus: Memisahkan dua paragraf agar tidak saling menempel atas-bawah, atau memberi jarak antara gambar dan teks.

.paragraf-teks {
  margin-bottom: 24px; /* Mendorong elemen apapun di bawahnya sejauh 24px */
}

Kesimpulan

Jika kamu ingin memperbesar area klik (clickable area) dari sebuah tombol atau mewarnai ruang kosong, gunakan Padding. Tapi jika kamu hanya ingin menjauhkan sebuah elemen dari elemen tetangganya tanpa mengubah ukurannya sendiri, gunakan Margin.