Margin

Margin adalah lapis terluar box model — ruang transparan yang menentukan jarak sebuah elemen dari tetangganya. Property ini menutup rangkaian komponen kotak yang selama ini kita bedah, dan menyimpan beberapa kemampuan yang tidak dimiliki padding: nilai negatif, kata kunci auto, serta perannya nanti di dalam flexbox. Pada chapter ini kita menjelajah semuanya, ditutup dengan demo lencana kartu yang menembus tepi — pola nyata pemanfaatan margin negatif.

Menulis Margin #

Pola penulisannya identik dengan padding: empat longhand margin-top hingga margin-left, plus shorthand yang menerima satu sampai empat nilai searah jarum jam. Perbedaannya terletak pada nilai tambahan yang diterima margin, yaitu nilai negatif dan auto:

.notifikasi {
  margin: 12px 0 24px;   /* atas 12, kiri-kanan 0, bawah 24 */
}

.jarak-ekstra {
  margin-top: 32px;      /* longhand untuk satu sisi */
}

Demo berikut menempatkan notifikasi di antara dua elemen tetangganya:

Sesuai sifatnya, ruang ini tidak berwarna dan tidak bisa diarahkan kursor.

Margin juga menerima persentase dengan aturan yang sama seperti padding: nilainya dihitung terhadap lebar elemen induk, termasuk untuk margin-top dan margin-bottom.

margin: 0 auto untuk Perataan Tengah #

Satu idiom yang sudah kita singgung di section Sintaks Dasar kembali relevan di sini:

.wadah-konten {
  max-width: 960px;
  margin: 0 auto;
}

Dua nilai berarti atas-bawah 0 dan kiri-kanan auto. Kata kunci auto membagi ruang sisa induk secara sama ke kedua sisi, sehingga elemen block yang lebih sempit dari induknya berpindah ke tengah. Syaratnya satu: elemen harus punya width atau max-width, karena elemen block yang memenuhi lebar induk tidak menyisakan ruang untuk dibagi.

Margin Negatif #

Margin adalah satu-satunya komponen box model yang menerima nilai negatif, dan efeknya berlawanan dengan margin biasa: alih-alih mendorong tetangga menjauh, margin negatif menarik elemen mendekat — bahkan menumpuk di atas elemen lain. Dua pemakaian yang umum:

• Merapatkan komponen yang jarak default-nya terlalu renggang, misalnya margin-top: -8px pada teks pengantar di bawah judul.
• Menumpuk elemen dekoratif di atas tepi komponen lain — lencana diskon yang menembus garis atas kartu, seperti demo di bawah.

Demo berikut memakai dua kartu dengan markup serupa; kartu kedua menarik lencananya menembus tepi atas kartu:

Margin pada Elemen Inline #

Pada elemen inline, hanya margin kiri dan kanan yang berpengaruh: ia menambah jarak horizontal sekeliling teks. margin-top dan margin-bottom pada elemen inline tidak menggeser tata letak sama sekali — bukan sekadar tidak terlihat, melainkan benar-benar diabaikan dalam perhitungan baris. Bila tombol teks inline terasa terlalu rapat secara vertikal, tambahkan padding yang sekalian mewarnai, atau ubah display-nya seperti pada chapter Padding.

Teaser: Auto Margin di Flexbox #

Kata kunci auto memiliki peran kedua yang akan sering kita pakai: di dalam flex container, margin-left: auto pada satu item menyerap seluruh ruang sisa di kirinya dan mendorong item tersebut ke ujung kanan. Pola ini sangat lazim untuk menempelkan tombol aksi ke ujung navbar. Kita praktikkan saat masuk bagian Flexbox.

Kesalahan Umum #

Ringkasan #

Margin mengatur ruang transparan di luar border dengan pola longhand-shorthand yang sudah kita kenal baik. Ia menerima auto untuk perataan tengah elemen block dan nilai negatif untuk menarik elemen mendekat atau menumpuknya — dua kemampuan yang tidak dimiliki padding. Pada elemen inline hanya margin horizontal yang bekerja, sementara di dalam flexbox auto berperan sebagai penyerap ruang sisa. Masih ada satu perilaku vertikal margin yang belum kita sentuh — margin collapse — dan itulah pembahasan chapter berikutnya.