Beranda / CSS / Pemrograman / Web

Pahami CSS Margin Collapse Biar Layout Kamu Nggak Berantakan (Tutorial CSS Part 22)

Oleh Sopyan Posting Komentar
Logo CSS
Gambar 22 : Logo CSS

Pernah bikin layout pakai CSS tapi hasilnya malah bikin garuk-garuk kepala? Misalnya kamu udah kasih margin-top 50px di satu elemen dan margin-bottom 30px di elemen sebelumnya, tapi jaraknya cuma 50px — bukan 80px kayak yang kamu kira? Nah, kamu baru aja kena yang namanya margin collapse.

Santai, kita bakal bahas tuntas margin collapse dan juga semua properti margin CSS-nya. Siap? Gaskeun!

Apa Itu CSS Margin Collapse?

Margin collapse adalah fenomena di CSS di mana dua margin vertikal yang berdekatan digabungkan jadi satu margin saja, bukan dijumlahkan. Margin yang dipakai adalah yang paling besar dari keduanya.

Gampangnya gini:

<!DOCTYPE html>
<html>
<head>
  <style>
    .box1 {
      margin-bottom: 30px;
      background-color: lightblue;
      padding: 20px;
    }
    .box2 {
      margin-top: 50px;
      background-color: lightcoral;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</body>
</html>

Hasilnya:

Contoh Border Collapse
Gambar 22.1 : Contoh Border Collapse

Pertanyaannya: Jarak antara .box1 dan .box2 jadi berapa?

Jawabannya: 50px (bukan 30px + 50px = 80px), karena margin-nya collapse jadi ngambil nilai terbesar.

Kapan Margin Collapse Bisa Terjadi?

Ada beberapa kondisi yang menyebabkan margin collapse, dan ini sering bikin developer bingung kalau belum paham:

1. Antara Dua Elemen Bertumpuk (Sibling Elements)

<!DOCTYPE html>
<html>
<head>
  <style>
    .div1, .div2 {
      background-color: #f0f0f0;
      margin: 40px 0;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="div1">Elemen 1</div>
  <div class="div2">Elemen 2</div>
</body>
</html>

Hasilnya:

Contoh CSS margin bertumpuk
Gambar 22.2 : Contoh CSS margin bertumpuk

Kalau masing-masing elemen punya margin-top dan margin-bottom, maka margin vertikalnya akan collapse jadi satu nilai terbesar.

2. Antara Parent dan Child

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      background-color: #ddd;
    }
    .child {
      margin-top: 60px;
      background-color: #bbb;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Ini anaknya</div>
  </div>
</body>
</html>

Hasilnya:

Contoh CSS margin collapse antara parent dan child
Gambar 22.3 : Contoh CSS Margin Collapse Antara Parent dan Child

Kalau .parent gak punya padding/border/overflow, margin dari .child bisa collapse ke luar dan “dorong” .parent dari atas.

3. Elemen Kosong

<!DOCTYPE html>
<html>
<head>
  <style>
    .kosong {
      margin: 40px 0;
      background-color: #aaa;
    }
  </style>
</head>
<body>
  <div class="kosong"></div>
</body>
</html>

Hasilnya:

Contoh CSS Margin Collapse Elemen Kosong
Gambar 22.4 : Contoh CSS Margin Collapse Elemen Kosong

Karena tidak ada isi dan properti pelindung, margin dari elemen ini bisa collapse ke elemen lainnya.

Cara Mengatasi Margin Collapse

Berikut ini trik-trik paling sering dipakai buat mencegah margin collapse: 

<!DOCTYPE html>
<html>
<head>
  <style>
    .parent {
      overflow: hidden; /* atau gunakan padding-top: 1px */
      background-color: #eee;
    }

    .child {
      margin-top: 50px;
      background-color: #ccc;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="parent">
    <div class="child">Margin-nya tidak collapse!</div>
  </div>
</body>
</html>

Hasilnya:

Contoh CSS mengatasi margin collapse
Gambar 22.5 : Contoh CSS Mengatasi Margin Collapse

Dengan overflow: hidden, margin atas anak tidak lagi collapse ke luar parent.

Semua Properti CSS Margin (Tabel Lengkap)

Properti Fungsi Contoh
margin Shorthand buat semua sisi: atas, kanan, bawah, kiri margin: 10px 20px 30px 40px;
margin-top Atur jarak atas elemen margin-top: 20px;
margin-right Atur jarak kanan margin-right: 15px;
margin-bottom Atur jarak bawah margin-bottom: 25px;
margin-left Atur jarak kiri margin-left: 5px;
margin: auto Auto margin (buat centering horizontal biasanya) margin: 0 auto;
margin: inherit Warisi nilai margin dari elemen parent margin: inherit;
margin: initial Balikin ke nilai default CSS margin: initial;
margin: unset Reset ke default atau warisan tergantung konteks margin: unset;

Penutup: Margin Bukan Cuma Jarak, Tapi Juga Drama

Banyak orang mikir margin cuma buat “ngasih jarak”, padahal ada drama collapse yang bisa bikin layout ngaco kalau nggak paham. Tapi sekarang kamu udah tahu rahasianya, dan pastinya lebih siap ngoding layout yang rapi dan profesional.

Kalau kamu lagi ribet sama layout, coba cek margin-nya dulu. Siapa tahu lagi collapse diam-diam.

Ada pertanyaan soal margin, padding, atau layout CSS lain? Tulis aja di komentar. Yuk bantuin yang lain biar gak pusing sama margin juga!

Posting Komentar untuk "Pahami CSS Margin Collapse Biar Layout Kamu Nggak Berantakan (Tutorial CSS Part 22)"