cssmarginspacingPemula4 mnt baca

Margin: Jarak Luar

Mengatur jarak antar elemen, margin collapsing yang terkenal membingungkan, dan trik margin auto.

Margin dan shorthand-nya

margin mengatur jarak di luar border elemen. Shorthand-nya mengikuti pola jam:

css
.kartu {
  margin: 10px;                /* semua sisi */
  margin: 10px 20px;           /* vertikal | horizontal */
  margin: 10px 20px 30px;      /* atas | horizontal | bawah */
  margin: 10px 20px 30px 40px; /* atas, kanan, bawah, kiri */
}

Margin collapsing: jebakan terkenal

Margin vertikal dari dua elemen bertetangga tidak dijumlahkan, melainkan diambil yang terbesar:

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

Jarak antara h1 dan p adalah 30px, bukan 50px. Margin-nya "runtuh" (collapse) menjadi nilai terbesar. Ini bukan bug, ini spesifikasi CSS. Margin horizontal tidak collapse, hanya vertikal.

Trik margin: auto

margin: 0 auto adalah cara klasik menengahkan blok secara horizontal:

css
.wadah {
  width: 800px;
  margin: 0 auto; /* kiri-kanan otomatis = tengah */
}

Syaratnya: elemen harus punya lebar tetap dan display block. (Untuk centering modern, flexbox/grid lebih fleksibel, dibahas di bab layout.)

Catatan teknis: margin negatif (margin-top: -10px) itu valid dan berguna, misal menarik elemen menumpuk sedikit ke atas. Pakai dengan sadar karena bisa merusak alur layout.

Analogi lanjutan: jarak antar rumah

Kalau box-model adalah paket, margin adalah jarak antar rumah di komplek. Rumah (border) tidak berubah ukuran, tapi jarak ke tetangga diatur lewat margin. Dan seperti dua rumah bertetangga, margin vertikal yang berhadapan "menyatu" (collapse): bukan dijumlah, tapi yang terbesar menang.

Kenapa margin collapse ada?

Alasan historis: untuk teks dokumen. Paragraf dengan margin: 16px 0 yang bertumpuk seharusnya berjarak 16px (nyaman dibaca), bukan 32px (terlalu renggang). Collapse membuat ritme vertikal teks konsisten tanpa perhitungan.

Contoh bertahap: ritme artikel

Tanpa memahami collapse, pemula sering "menggandakan" margin:

css
/* Kedua aturan ini menghasilkan jarak 24px, BUKAN 48px */
h2 { margin-bottom: 24px; }
p { margin-top: 24px; }

Itu benar dan disengaja. Contoh ritme yang rapi:

css
.artikel > * {
  margin: 0; /* nol-kan dulu semua */
}

.artikel > * + * {
  margin-top: 24px; /* lalu beri jarak konsisten antar anak */
}

Pola * + * (owl selector): setiap anak yang punya kakak di atasnya dapat margin-top. Jarak selalu 24px, tidak pernah ganda.

Centering horizontal dengan margin auto

css
.wadah {
  width: min(800px, 90%);
  margin-inline: auto; /* kiri-kanan otomatis sama = tengah */
}

auto pada margin kiri-kanan membagi ruang sisa sama rata. Syarat: elemen block dengan width yang lebih kecil dari induk.

Kesalahan umum pemula

Salah: margin-top pada anak mendorong induk (collapsing through). Margin-top anak pertama "bocor" keluar induk dan menggeser induknya, bukan anaknya!

css
/* SALAH: .induk ikut turun, bukan .anak */
.induk { background: #eee; }
.anak { margin-top: 40px; }

/* BENAR: beri padding pada induk sebagai gantinya */
.induk { background: #eee; padding-top: 40px; }

Atau beri border/padding 1px pada induk untuk "menahan" margin anak.

Salah: margin negatif tanpa paham. margin-top: -20px menarik elemen ke atas menimpa sebelumnya. Berguna untuk efek overlap, berbahaya bila asal pakai.

Salah: memakai margin untuk jarak dalam komponen fleksibel. Di flexbox/grid modern, gap lebih tepat untuk jarak antar item. Margin untuk jarak ke dunia luar.

Latihan kilat

  1. h2 { margin-bottom: 30px; } diikuti p { margin-top: 30px; }. Berapa jarak aktual di antara keduanya? Kenapa?
  2. Wadah 800px berisi kotak 400px. Bagaimana menengahkan kotak secara horizontal dengan margin?
  3. Anak dengan margin-top: 40px malah membuat INDUKNYA turun. Jelaskan kenapa dan dua cara memperbaikinya.

Kunci: (1) 30px, karena margin vertikal collapse (yang terbesar menang, bukan dijumlah). (2) .kotak { width: 400px; margin-inline: auto; }. (3) Margin collapse menembus induk tanpa border/padding; perbaiki dengan padding-top pada induk atau beri border 1px pada induk.

Rangkuman

Margin = jarak luar. Ingat pola searah jarum jam untuk shorthand, waspadai margin collapsing vertikal, dan pakai margin: 0 auto untuk centering blok klasik.

Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Buktikan Collapsing

Di playground:

  1. Ubah margin-bottom h1 menjadi 50px dan margin-top p menjadi 10px. Berapa jarak aktualnya? Tulis di komentar.
  2. Buat .tengah menempel ke kanan (bukan tengah) hanya dengan mengubah margin.
  3. Tambahkan satu elemen baru di HTML dan beri margin yang membuatnya collapse dengan paragraf. Amati hasilnya.
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>
Open on CodeSandboxOpen Sandbox