Coba antri di kasir minimarket. Ada orang yang berdiri 1 meter di belakang kamu (santai), ada yang nyomot 30cm di belakang (gak nyaman), ada juga yang nempel-nempelin troli (mau berantem rasanya). Jarak personal itu penting buat kenyamanan. CSS margin ngatur "jarak personal" tiap elemen — ruang KOSONG di luar diri sendiri yang ngasih napas dari elemen tetangga.

🤔 Plot twist. Margin vertikal punya perilaku aneh: kalau dua elemen vertikal bersebelahan punya margin, jaraknya BUKAN jumlah keduanya — tapi yang TERBESAR. Ini namanya "margin collapse" — sumber bingung pemula CSS. Bakal dibahas lebih dalam di section Jebakan.

Shorthand margin urutannya searah jarum jam dari atas:

margin: 40px 30px 30px 30px;  /* atas, kanan, bawah, kiri */
margin: 10px 20px;            /* vertikal, horizontal */
margin: 10px;                 /* semua sisi sama */

Atau pakai sub-properti spesifik kalau cuma satu sisi: margin-top, margin-right, margin-bottom, margin-left.

🎭 Analogi sehari-hari

margin = jarak antara orang di lift — ruang KOSONG di luar diri sendiri agar tidak nempel orang lain. Beda sama padding yang ruang di DALAM kostum.

⚠️ Jebakan yang sering ditemui

• Margin collapse — margin vertikal dua elemen bersebelahan tidak ditambah, diambil yang terbesar. margin-bottom: 20px + margin-top: 30px = jarak 30px, bukan 50px. Cuma di blok vertikal.
• margin: auto = center horizontal untuk block (butuh width). Tidak jalan untuk vertikal kecuali parent flex/grid.
• Negative margin valid + sering dipakai untuk overlap. Hati-hati, mudah bug.
• Margin di inline element (top/bottom) diabaikan. Pakai padding atau ubah ke inline-block.
• margin: 0 auto vs margin: auto — kalau set kedua-duanya 0 untuk top/bottom, tinggi tidak nyusut.
• margin di body punya default 8px — sering perlu reset di reset CSS.

🧪 Tebakan cepat — margin collapse. Tanpa render, tebak jarak total antar paragraf:

p:first-child { margin-bottom: 30px; }
p:nth-child(2) { margin-top: 20px; }

Awalnya kira 50px (30+20)? Jawaban benar: 30px — yang paling besar menang. Margin vertikal antar elemen block "merge" jadi satu, bukan ditambah. Cuma terjadi vertikal, gak horizontal. Sumber bug klasik "kenapa margin aku gak ngaruh?" — solusinya: pakai padding di parent atau display: flex/grid (margin gak collapse di flex/grid).