CSS Margin: Shorthand, margin auto dan Margin Collapsing

Apa itu margin

Margin adalah ruang di luar border sebuah elemen. Margin selalu transparan, dan tugasnya adalah mendorong elemen lain menjauh. Di contoh ini, container abu-abu terlihat menembus margin di sekitar kotak biru:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin</title>
  <style>
    .container {
      display: flow-root; /* keeps the child's margin inside the gray area */
      background: #e5e7eb;
    }
    .box {
      margin: 24px;
      padding: 12px;
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">24px of margin on every side (the gray)</div>
  </div>
</body>
</html>

Pita abu-abu itu bukan bagian dari kotak: background kotak itu sendiri berhenti di border-nya. Untuk ruang yang ikut memakai background elemen, pakai padding.

Shorthand margin

margin menerima satu sampai empat nilai, dengan urutan searah jarum jam yang sama seperti padding:

Setiap sisi juga punya property sendiri (margin-top, margin-right, margin-bottom, margin-left) dan versi logis yang mengikuti arah teks (margin-inline-start, margin-inline-end, margin-block, margin-inline).

Berbeda dengan padding, margin menerima auto dan nilai negatif:

Menengahkan dengan margin: 0 auto

margin: 0 auto adalah cara klasik untuk menengahkan blok secara horizontal. auto di kedua sisi menyuruh browser membagi sisa ruang sama rata. Elemennya butuh lebar yang lebih kecil dari container, kalau tidak, tidak ada sisa ruang yang bisa dibagi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    .page {
      max-width: 300px;
      margin: 0 auto;
      background: #2563eb;
      color: white;
      padding: 12px;
    }
    .end {
      width: 160px;
      margin-left: auto; /* all the leftover space goes on the left */
      background: #16a34a;
      color: white;
      padding: 8px;
      margin-top: 12px;
    }
  </style>
</head>
<body>
  <div class="page">Centered with margin: 0 auto</div>
  <div class="end">Pushed to the end</div>
</body>
</html>

Margin auto tidak menengahkan secara vertikal di normal flow (margin auto vertikal menjadi 0) dan tidak berpengaruh pada elemen inline. Untuk gambaran lengkap tentang cara menengahkan, lihat cara center a div.

Margin collapsing

Saat dua margin vertikal bersentuhan, keduanya tidak dijumlahkan. Browser hanya menyimpan yang lebih besar. Di sini kotak pertama punya margin-bottom: 30px dan kotak kedua margin-top: 20px, dan jarak di antara keduanya 30px, bukan 50px:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin collapsing</title>
  <style>
    .box { background: #2563eb; color: white; padding: 10px; }
    .a { margin-bottom: 30px; }
    .b { margin-top: 20px; }
  </style>
</head>
<body>
  <div class="box a">margin-bottom: 30px</div>
  <div class="box b">margin-top: 20px</div>
  <p id="gap"></p>
  <script>
    const a = document.querySelector('.a').getBoundingClientRect();
    const b = document.querySelector('.b').getBoundingClientRect();
    document.getElementById('gap').textContent = 'Gap: ' + (b.top - a.bottom) + 'px';
  </script>
</body>
</html>

Collapsing ini disengaja: paragraf dan judul bisa membawa jaraknya masing-masing tanpa jarak itu menjadi ganda di tempat mereka bertemu. Yang sering mengejutkan adalah kasus kedua, saat margin atas sebuah child lolos keluar dari elemen induknya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Parent collapse</title>
  <style>
    .parent { background: #e5e7eb; margin-bottom: 16px; }
    .child { margin-top: 30px; background: #f59e0b; padding: 8px; }
    .fixed { display: flow-root; }
  </style>
</head>
<body>
  <div class="parent"><div class="child">Margin escaped: no gray above me</div></div>
  <div class="parent fixed"><div class="child">flow-root: 30px of gray above me</div></div>
</body>
</html>

Di elemen induk pertama, margin 30px milik child menyatu melewati tepi atas induknya, jadi margin itu mendorong seluruh elemen induk ke bawah, bukan membuat ruang abu-abu di dalamnya. Salah satu cara berikut bisa mencegahnya:

• display: flow-root pada elemen induk (berbeda dengan overflow: hidden, cara ini tidak memotong apa pun).
• Padding atau border di tepi atas elemen induk.
• Elemen induk flex atau grid: margin item flex dan grid tidak pernah menyatu.

Margin horizontal tidak pernah menyatu, begitu juga margin elemen yang memakai float atau diposisikan secara absolute.

Margin negatif

Margin negatif menarik ke arah yang berlawanan. Di sisi atas atau sisi awal, margin ini memindahkan elemen itu sendiri. Di sisi bawah atau sisi akhir, margin ini menarik elemen berikutnya lebih dekat. Kotak-kotaknya bisa saling tumpang tindih:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Negative margin</title>
  <style>
    .card { background: #e5e7eb; padding: 16px; width: 240px; }
    .avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background: #2563eb;
      border: 4px solid white;
      margin-top: -46px; /* pulled up over the banner */
    }
    .banner { height: 60px; background: #16a34a; width: 272px; }
  </style>
</head>
<body>
  <div class="banner"></div>
  <div class="card">
    <div class="avatar"></div>
    <p>The avatar overlaps the banner.</p>
  </div>
</body>
</html>

margin auto di flexbox

Di dalam container flex, margin auto mengambil semua ruang kosong di sisinya. Ini cara paling sederhana untuk mendorong satu item ke ujung terjauh sebuah baris, dan di flexbox auto juga berfungsi secara vertikal:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Flex margin auto</title>
  <style>
    nav { display: flex; gap: 12px; background: #111827; padding: 10px; }
    nav a { color: white; text-decoration: none; }
    .login { margin-inline-start: auto; color: #f59e0b; }
  </style>
</head>
<body>
  <nav>
    <a href="#">Home</a>
    <a href="#">Docs</a>
    <a href="#">Blog</a>
    <a href="#" class="login">Log in</a>
  </nav>
</body>
</html>

margin-inline-start: auto menaruh ruang kosong sebelum "Log in", di ujung baris, baik di halaman kiri ke kanan maupun kanan ke kiri.

Kesalahan yang sering terjadi

• margin: 0 auto pada elemen tanpa lebar. Blok sudah mengisi container-nya, jadi tetapkan width atau max-width.
• margin: auto pada elemen inline. Margin auto pada span, a, atau img yang dibiarkan inline bernilai 0. Ubah menjadi display: block.
• Menjumlahkan dua margin vertikal dan mengharapkan totalnya. Keduanya menyatu menjadi yang lebih besar. Pakai gap di flex atau grid, atau konsisten memakai margin satu arah saja.
• Margin child mendorong elemen induknya. Itu collapsing antara induk dan child, jadi tambahkan display: flow-root pada elemen induk.
• Memakai margin untuk ruang yang seharusnya punya background. Margin itu transparan, jadi pakai padding.