Margin adalah ruang kosong di luar garis tepi (border) sebuah elemen. Fungsinya bikin jarak antara elemen itu dan elemen di sekitarnya. Kayak jarak antre di kasir: badan kamu gak jadi lebih besar, kamu cuma berdiri lebih jauh dari orang lain.
🧪 Tebakan cepat: paragraf atas punya
margin-bottom: 30px, paragraf bawah punyamargin-top: 20px. Jarak di antara keduanya 50px? Tebak dulu, jawabannya ada di bagian "Dua margin yang bertemu".
Jarak di satu sisi
<h1>Judul</h1>
<p>Paragraf</p>
<style>
p {
margin-top: 20px;
}
</style>
padalah selector: aturan ini berlaku buat semua<p>. Cukup nama tag-nya, tanpa<dan>.margin-topadalah properti: jarak di sisi atas elemen saja.:adalah titik dua, cukup satu, di antara properti dan nilai.20pxadalah nilainya: angka plus satuanpx(piksel).;menutup baris itu.
Hasilnya, paragraf turun 20px menjauh dari judul. Sisi lainnya punya properti sendiri: margin-right, margin-bottom dan margin-left.
Selector-nya harus menunjuk elemen yang mau digeser. h1 > p artinya "<p> yang ada di dalam <h1>". Di contoh ini gak ada <p> di dalam <h1>, jadi aturan itu gak kena elemen apa pun.
Empat sisi dalam satu baris
Properti margin saja bisa mengatur empat sisi sekaligus. Jumlah nilainya menentukan artinya:
.a { margin: 40px; } /* semua sisi 40px */
.a { margin: 40px 32px; } /* atas-bawah 40px, kanan-kiri 32px */
.a { margin: 40px 32px 24px; } /* atas, kanan-kiri, bawah */
.a { margin: 40px 32px 24px 16px; } /* atas, kanan, bawah, kiri */
Empat nilai dibaca searah jarum jam, mulai dari atas. Jadi margin: 20px sama dengan margin-top: 20px plus tiga sisi lainnya.
Angkanya selalu butuh satuan: 20px, bukan 20. Angka tanpa satuan gak dimengerti CSS, jadi barisnya dibuang. Cuma 0 yang boleh tanpa satuan.
Ke tengah dengan auto, dan margin negatif
.kartu {
width: 300px;
margin: 0 auto;
}
margin: 0 auto artinya atas-bawah 0, kanan-kiri auto. Browser membagi sisa ruang kiri dan kanan sama rata, jadi kotaknya pas di tengah. Syaratnya, elemennya punya width yang lebih kecil dari induknya.
Margin juga boleh negatif, misalnya margin-top: -10px. Elemennya ditarik ke arah sebaliknya, jadi mendekat atau menimpa tetangganya. Padding gak bisa begitu, padding gak boleh negatif.
Dua margin yang bertemu
.atas { margin-bottom: 30px; }
.bawah { margin-top: 20px; }
Jaraknya bukan 50px, tapi 30px. Kalau margin bawah satu elemen bertemu margin atas elemen di bawahnya, browser gak menjumlahkan keduanya, yang dipakai cuma yang paling besar. Namanya margin collapse. Ini cuma terjadi ke atas-bawah, gak ke samping. Di dalam induk display: flex atau display: grid, margin gak collapse, jadi jaraknya beneran 50px.
⚠️ Jebakan yang sering ketemu
- Titik dua dobel.
margin-top: : 42pxbikin barisnya rusak, dan browser membuangnya diam-diam. - Margin atas di elemen inline.
<span>dan<a>mengabaikanmargin-topdanmargin-bottom. Pakai padding, atau ubah jadidisplay: inline-block. - Jarak tak terduga di pinggir halaman.
<body>punya margin bawaan 8px. Banyak CSS menulisbody { margin: 0; }di awal.
TL;DR: Margin adalah jarak di luar border. Pakai margin-top, margin-right, margin-bottom, margin-left buat satu sisi, atau margin dengan satu sampai empat nilai (searah jarum jam dari atas). Nilainya butuh satuan, misalnya 20px. margin: 0 auto menaruh kotak yang punya width di tengah, margin negatif menarik elemen ke arah sebaliknya, dan dua margin atas-bawah yang bertemu gak dijumlah: yang paling besar yang dipakai.
