BAB 11: Margin CSS

Margin sudah berjalan dengan baik di bab sebelumnya — border yang kita pelajari di Bab 10 memberi batas visual yang tegas pada elemen. Tapi border sendirian tidak cukup: ketika elemen-elemen berjejer, mereka butuh ruang antar satu sama lain. Di situlah margin berperan, mengatur jarak di luar setiap elemen agar tata letak halaman terasa lapang dan terorganisir.

Margin bekerja dari sisi luar elemen, mendorong elemen lain menjauh. Ini berbeda dengan padding yang bekerja dari dalam — tapi keduanya saling melengkapi. Memahami margin adalah separuh perjalanan memahami ruang di CSS.

Properti Margin per Sisi

Seperti border-width, margin bisa diatur per sisi menggunakan properti individual. Masing-masing properti menerima nilai dalam berbagai satuan CSS.

Satuan yang bisa digunakan antara lain px untuk nilai tetap, em untuk nilai relatif terhadap ukuran font elemen, dan % untuk nilai relatif terhadap lebar elemen induk. Satu aturan penting: margin tidak menerima nilai negatif dalam arti yang sama seperti padding — tapi margin negatif memang valid dan berguna untuk kasus tertentu seperti menarik elemen lebih dekat dari posisi normalnya.

Shorthand Margin

Daripada menulis keempat properti secara terpisah, gunakan shorthand margin dengan pola yang sama seperti border-width:

Pola 4 nilai adalah yang paling eksplisit — urutan searah jarum jam mulai dari atas ini konsisten dengan banyak properti CSS lain yang sudah kita pelajari.

Margin Auto untuk Centering

Salah satu penggunaan margin yang paling sering adalah memusatkan elemen secara horizontal menggunakan margin: auto. Nilai auto di sisi kiri dan kanan akan membagi ruang kosong secara merata, sehingga elemen terdorong ke tengah.

Margin Collapse

Ini adalah perilaku CSS yang paling sering membingungkan pemula: ketika dua elemen block berurutan secara vertikal, margin bawah elemen pertama dan margin atas elemen kedua tidak dijumlahkan — melainkan digabungkan (collapsed) menjadi nilai yang lebih besar dari keduanya.

Margin collapse terjadi antara elemen block bersaudara secara vertikal, antara elemen induk dan anak pertama/terakhirnya (jika tidak ada border, padding, atau konten yang memisahkan mereka), dan pada elemen yang tidak memiliki konten, border, atau padding sama sekali.

Cara Menghindari Margin Collapse

Ketika margin collapse menghasilkan jarak yang tidak diinginkan, ada beberapa teknik untuk mencegahnya:

Teknik paling bersih di CSS modern adalah menggunakan Flexbox atau Grid pada elemen induk — keduanya menonaktifkan margin collapse sepenuhnya.

Latihan

Buka file profil.css dari proyek portofolio yang sudah kita kerjakan bersama:

1. Terapkan margin: 0 auto pada .container-konten dengan lebar 700px. Amati bagaimana elemen tersebut terpusat di halaman.

2. Buat dua paragraf berurutan, masing-masing dengan margin-bottom: 32px dan margin-top: 20px. Gunakan DevTools browser untuk mengukur jarak aktual di antara keduanya — apakah 52px atau 32px?

3. Coba tambahkan padding-top: 1px pada elemen induk kedua paragraf tersebut, lalu ukur kembali jaraknya. Amati bagaimana collapse berubah.

Margin mengatur jarak di luar elemen. Tapi ada sisi lain dari ruang yang sama pentingnya: jarak di dalam elemen, antara kontennya dan batasnya. Itu yang akan kita bahas berikutnya — padding, pasangan margin yang bekerja dari dalam.

Referensi

1. 1 MDN Web Docs — CSS margin shorthand property
2. 2 MDN Web Docs — Mastering margin collapsing
3. 3 W3C — CSS Box Model Level 3: Margins