Dalam CSS, margin adalah properti yang digunakan untuk menciptakan ruang kosong (atau “jarak”) di luar batas (border) sebuah elemen. Sederhananya, margin mendorong elemen lain menjauh darinya.
Properti ini adalah bagian fundamental dari CSS Box Model, yang mendefinisikan bagaimana elemen HTML ditampilkan sebagai kotak persegi panjang di halaman.
Seperti yang terlihat pada diagram, model kotak terdiri dari:
- Content: Isi (teks, gambar)
- Padding: Ruang antara konten dan border (di dalam elemen).
- Border: Garis yang mengelilingi padding dan konten.
- Margin: Ruang di luar border, yang memisahkan elemen ini dari elemen lainnya.
Variasi Properti Margin
Anda dapat mengatur margin untuk setiap sisi elemen secara individual atau menggunakan properti shorthand.
1. Properti Individual
Ini adalah cara paling spesifik untuk mengatur margin pada satu sisi:
margin-top: 10px;(mengatur margin atas sebesar 10 piksel)margin-right: 5px;(mengatur margin kanan sebesar 5 piksel)margin-bottom: 10px;(mengatur margin bawah sebesar 10 piksel)margin-left: 5px;(mengatur margin kiri sebesar 5 piksel)
2. Properti Shorthand (Ringkasan)
Properti margin adalah cara pintas untuk mengatur keempat sisi sekaligus. Cara kerjanya bervariasi tergantung berapa banyak nilai yang Anda berikan:
- Empat Nilai:
margin: 10px 5px 15px 20px; 10px(atas)5px(kanan)15px(bawah)20px(kiri) (Urutannya searah jarum jam: Atas, Kanan, Bawah, Kiri)- Tiga Nilai:
margin: 10px 5px 15px; 10px(atas)5px(kiri dan kanan)15px(bawah)- Dua Nilai:
margin: 10px 5px; 10px(atas dan bawah)5px(kiri dan kanan)- Satu Nilai:
margin: 10px; 10px(berlaku untuk keempat sisi: atas, kanan, bawah, dan kiri)
3. Nilai Khusus: auto
Nilai auto sangat sering digunakan. Saat diterapkan pada margin kiri dan kanan (margin-left: auto; margin-right: auto;), ini memberi tahu browser untuk secara otomatis menghitung dan membagi ruang kosong yang tersedia secara merata.
Ini adalah trik paling umum untuk membuat elemen blok berada di tengah secara horizontal di dalam containernya.
Contoh (centering):
.box {
width: 500px;
margin: 0 auto; /* Atas/bawah 0, kiri/kanan otomatis */
}
4. Margin Collapse (Peleburan Margin)
Satu konsep penting lainnya adalah “margin collapse”. Ini terjadi ketika margin vertikal (atas dan bawah) dari dua elemen yang berdekatan saling bersentuhan. Alih-alih menjumlahkan kedua margin, browser akan mengambil nilai margin yang terbesar dari keduanya.
