Margin dan Padding

Dua jenis jarak

Padding = jarak di dalam kotak, antara content dan border. Background elemen ikut meluas ke area padding.

Margin = jarak di luar kotak, antara border elemen ini dan elemen tetangganya. Background tidak ikut, area margin selalu transparan.

.kartu {
  padding: 24px;  /* isi kartu tidak menempel ke tepi */
  margin: 16px;   /* jarak ke kartu lain di sekitarnya */
}

Shorthand: tulis sekali untuk empat sisi

Urutan penulisannya selalu searah jarum jam: atas, kanan, bawah, kiri. Cara ingatnya: "mulai dari jam 12".

.kotak {
  margin: 10px 20px 30px 40px;
  /* atas 10, kanan 20, bawah 30, kiri 40 */
}

Ada versi singkatnya:

/* 1 nilai: semua sisi sama */
padding: 16px;

/* 2 nilai: vertikal | horizontal */
margin: 10px 20px;

/* 3 nilai: atas | horizontal | bawah */
padding: 10px 20px 30px;

Bisa juga per sisi kalau cuma satu yang perlu diubah: margin-top, padding-left, dan seterusnya.

Margin auto: trik centering horizontal

.wadah {
  width: 800px;
  margin: 0 auto; /* tengah secara horizontal */
}

margin-left: auto dan margin-right: auto membagi sisa ruang sama rata ke kiri-kanan. Syaratnya: elemen harus punya lebar yang pasti dan bukan full width. Ini cara klasik menengahkan container.

Jebakan: margin collapse

Dua margin vertikal yang bertumpuk tidak dijumlahkan, yang dipakai hanya yang terbesar.

h2 {
  margin-bottom: 30px;
}
p {
  margin-top: 20px;
}

Jarak antara h2 dan p bukan 50px, melainkan 30px. Margin yang bersentuhan "runtuh" menjadi satu.

Catatan teknis: margin collapse juga terjadi antara induk dan anak pertama/terakhir kalau induk tidak punya padding atau border. Gejalanya: margin anak seperti "bocor" keluar induk. Solusi cepatnya adalah memberi padding atau border kecil ke induk, atau pakai display: flow-root pada induk.

Kapan pakai yang mana?

• Butuh ruang di dalam elemen (teks tidak menempel tepi): padding
• Butuh jarak antar elemen bersaudara: margin
• Butuh background warna ikut meluas: padding (margin selalu transparan)

Rangkuman

Padding untuk jarak dalam, margin untuk jarak luar. Hafalkan urutan shorthand searah jarum jam dan trik margin: 0 auto buat centering. Waspadai margin collapse: margin vertikal yang bertumpuk tidak dijumlahkan.