SIAP – Sistem Informasi Anak Pintar

HTML Tingkat Lanjut
Belajar Margin

oleh: Suryo Adhy Chandra, ST

1. Apa itu Margin?

Margin adalah jarak antara suatu elemen dengan elemen lain di sekitarnya (di luar batas/border elemen tersebut). Kalau padding adalah bantalan di dalam kotak, maka margin adalah jarak antar kotak.

Ilustrasi sederhana:

Kotak A — margin: 0

Kotak B — margin: 0

↑ Tanpa margin: kedua kotak saling berdempetan

Kotak A — margin: 16px

Kotak B — margin: 16px

↑ Dengan margin 16px: ada jarak yang jelas antar kotak dan tepi container

2. Mengapa Menggunakan Margin?

Memberi jarak antar elemen — agar halaman tidak terlihat penuh sesak
Memisahkan bagian-bagian — judul, paragraf, gambar, dan tombol butuh jarak agar mudah dibaca
Memusatkan elemen — margin: 0 auto adalah cara klasik memusatkan blok secara horizontal
Mengatur tata letak — margin bisa mendorong elemen ke kanan, kiri, atas, atau bawah

3. Cara Penulisan Margin

Penulisan	Artinya
`margin: 20px;`	Semua sisi = 20px
`margin: 10px 30px;`	Atas & bawah = 10px, Kiri & kanan = 30px
`margin: 5px 10px 15px 20px;`	Atas = 5px, Kanan = 10px, Bawah = 15px, Kiri = 20px
`margin: 0 auto;`	Atas & bawah = 0, Kiri & kanan = otomatis (memusatkan)
`margin-top / right / bottom / left`	Mengatur satu sisi saja

/* Semua sisi sama */ div { margin: 20px; } /* Atas-bawah | kiri-kanan */ div { margin: 10px 30px; } /* Atas | kanan | bawah | kiri */ div { margin: 5px 10px 15px 20px; } /* Tengah horizontal (harus ada width yang ditentukan) */ div { width: 300px; margin: 0 auto; } /* Per sisi */ div { margin-top: 20px; margin-bottom: 20px; }

Contoh perbandingan nilai margin:

margin: 4px

margin: 16px

margin: 32px

4. Margin Negatif

Tidak seperti padding, margin bisa bernilai negatif. Jika margin positif mendorong elemen menjauh, margin negatif justru menarik elemen ke arah sebaliknya sehingga bisa tumpang tindih (overlap) dengan elemen di sekitarnya.

/* margin negatif menarik elemen ke atas */ div { margin-top: -20px; } /* margin negatif menarik elemen ke kiri */ div { margin-left: -30px; }

Perhatikan contoh berikut — kotak merah ditarik ke atas menimpa kotak biru:

Kotak 1 — normal

Kotak 2 — margin-top: -20px (naik, menimpa kotak 1)

Kotak 3 — normal kembali

Kapan margin negatif berguna?

Membuat elemen keluar sebagian dari container (efek desain menarik)
Membuat efek kartu bertumpuk
Mendekatkan dua elemen yang jaraknya terlalu jauh
Koreksi posisi elemen tanpa mengubah struktur HTML

Hati-hati! Margin negatif bisa membuat elemen menimpa atau tersembunyi di balik elemen lain secara tidak terduga. Gunakan dengan cermat dan selalu cek tampilan di browser.

5. Contoh Margin untuk Styling Menu

Salah satu penggunaan margin yang paling umum adalah pada navigasi / menu. Margin digunakan untuk memberi jarak antar item menu agar tidak terlalu berdekatan.

Contoh menu horizontal tanpa margin:

nav a { /* tanpa margin */ background: #3b82f6; color: white; padding: 8px 16px; text-decoration: none; border-radius: 6px; }

Beranda Tentang Blog Kontak

Contoh menu horizontal dengan margin:

nav a { background: #3b82f6; color: white; padding: 8px 16px; text-decoration: none; border-radius: 6px; margin-right: 8px; /* <-- jarak antar item */ }

Beranda Tentang Blog Kontak

Contoh menu vertikal (sidebar) dengan margin:

nav a { display: block; background: #1e40af; color: white; padding: 10px 20px; text-decoration: none; border-radius: 6px; margin-bottom: 6px; /* <-- jarak antar baris */ }

Beranda Tentang Blog Kontak

Blog diberi warna berbeda sebagai contoh item aktif

Ringkasan:

Margin = jarak di luar elemen (antar elemen)
Margin bisa positif (mendorong menjauh) atau negatif (menarik mendekat / overlap)
margin: 0 auto = cara memusatkan elemen blok secara horizontal
Sering digunakan pada menu navigasi untuk mengatur jarak antar item

Yuk Coba Sendiri!

← Kembali Ke Daftar HTML Tingkat Lanjut