CSS Dasar #16 - Margin Collapse dan Negative Margin

Setelah kita mempelajari Box Model (margin, padding, border, content), sekarang saatnya memahami dua konsep lanjutan tentang margin yang sering membingungkan pemula: Margin Collapse dan Negative Margin. Memahami kedua konsep ini akan membantu Anda mengatur layout dengan lebih presisi dan menghindari kejutan yang tidak diinginkan.

1. Margin Collapse (Margin yang Menyatu)

Margin collapse adalah fenomena di mana margin vertikal (atas dan bawah) dari dua elemen block yang bersebelahan akan bergabung menjadi satu (nilai yang lebih besar yang digunakan). Ini adalah perilaku default CSS yang sering menyebabkan kebingungan.

Aturan Margin Collapse:

Hanya terjadi pada margin vertikal (atas dan bawah), TIDAK pada margin horizontal (kiri/kanan)
Hanya terjadi pada elemen block (bukan inline atau inline-block)
Ketika dua margin bertemu, nilai yang terbesar yang digunakan (bukan dijumlahkan)
Jika salah satu margin negatif, terjadi penjumlahan (negatif + positif)

Contoh Margin Collapse Antar Elemen Bersebelahan:

<style>
    .box {
        background: #3b82f6;
        color: white;
        padding: 20px;
        margin: 30px 0;
    }
</style>

<div class="box">Kotak 1 (margin-bottom: 30px)</div>
<div class="box">Kotak 2 (margin-top: 30px)</div>
<!-- Jarak antara kedua kotak adalah 30px (bukan 60px) -->

Kotak 1 (margin-bottom: 25px)

Kotak 2 (margin-top: 25px)

Jarak antara kedua kotak adalah 25px (bukan 50px) karena margin collapse.

Ilustrasi Margin Collapse:
Kotak A (margin-bottom: 30px) + Kotak B (margin-top: 40px) → jarak antara = 40px (yang terbesar)
Kotak A (margin-bottom: 30px) + Kotak B (margin-top: 20px) → jarak antara = 30px (yang terbesar)
Bukan 30+40=70px, bukan 30+20=50px, tapi nilai terbesarnya.

Margin Collapse Antara Parent dan Child:

Margin collapse juga terjadi antara elemen parent dan child pertama/terakhir jika tidak ada border, padding, atau konten yang memisahkan.

<style>
    .parent {
        background: #f0f4f8;
        margin-top: 30px;  /* margin parent */
    }
    .child {
        background: #3b82f6;
        color: white;
        padding: 20px;
        margin-top: 40px;  /* margin child */
    }
</style>

<div class="parent">
    <div class="child">Child dengan margin-top 40px</div>
</div>
<!-- Margin parent dan child collapse, yang terbesar (40px) yang berlaku -->

Child dengan margin-top 30px

Margin parent dan child collapse → jarak dari tepi parent adalah 30px (bukan 20px parent + 30px child).

Cara Mencegah Margin Collapse:

Untuk mencegah margin collapse antara parent dan child, Anda bisa:

Memberi padding pada parent
Memberi border pada parent
Memberi overflow: auto/hidden pada parent
Memberi position: absolute pada child
Memberi display: inline-block atau flex pada parent

<style>
    .parent-fix {
        background: #f0f4f8;
        margin-top: 30px;
        padding-top: 1px;  /* Mencegah margin collapse */
    }
    .child {
        background: #22c55e;
        color: white;
        padding: 20px;
        margin-top: 40px;
    }
</style>

<div class="parent-fix">
    <div class="child">Margin child tidak collapse karena parent ada padding</div>
</div>

Child dengan margin-top 30px (tidak collapse)

Dengan padding pada parent, margin child tetap di dalam parent.

2. Negative Margin

Negative margin adalah margin dengan nilai negatif (contoh: margin-top: -20px;). Margin negatif akan menarik elemen ke arah yang berlawanan dari margin positif.

Perilaku Negative Margin:

margin-top: -20px; → elemen bergerak ke atas
margin-bottom: -20px; → elemen di bawahnya akan tertarik ke atas
margin-left: -20px; → elemen bergerak ke kiri
margin-right: -20px; → elemen di kanannya akan tertarik ke kiri

Contoh Negative Margin:

<style>
    .normal {
        background: #3b82f6;
        color: white;
        padding: 15px;
        margin: 10px;
    }
    .negative {
        background: #ef4444;
        color: white;
        padding: 15px;
        margin: 10px;
        margin-top: -20px;  /* tarik ke atas */
    }
</style>

<div class="normal">Kotak normal</div>
<div class="negative">Kotak dengan margin-top: -20px (tertarik ke atas)</div>
<div class="normal">Kotak normal di bawahnya ikut tertarik ke atas</div>

Kotak normal

Kotak dengan margin-top: -15px (tertarik ke atas)

Kotak normal di bawahnya ikut tertarik ke atas

Penggunaan Negative Margin yang Umum:

Membuat elemen saling tumpang tindih (overlap)
Menarik elemen keluar dari container
Membuat efek visual tertentu (seperti gambar melampaui batas)
Mengatur posisi elemen secara presisi

Contoh: Membuat Overlap dengan Negative Margin

<style>
    .container {
        background: #f0f4f8;
        padding: 20px;
        text-align: center;
    }
    .box {
        display: inline-block;
        width: 100px;
        height: 100px;
        background: #3b82f6;
        color: white;
        line-height: 100px;
        margin: 0 -10px;  /* overlap secara horizontal */
    }
    .box:hover {
        position: relative;
        z-index: 1;
    }
</style>

<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

Kotak saling tumpang tindih karena margin-left dan margin-right negatif.

Contoh: Membuat Gambar Melampaui Batas Container

<style>
    .card {
        background: white;
        border-radius: 12px;
        padding: 20px;
        width: 300px;
        text-align: center;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .card img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        margin-top: -40px;   /* gambar melampaui batas card ke atas */
        border: 4px solid white;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
</style>

<div class="card">
    <img src="https://via.placeholder.com/80x80?text=Avatar" alt="avatar">
    <h3>John Doe</h3>
    <p>Web Developer</p>
</div>

John Doe

Web Developer

Avatar melampaui batas card karena margin-top negatif.

Contoh Proyek: Layout dengan Margin Collapse dan Negative Margin

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Margin Collapse & Negative Margin - Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            padding: 40px 20px;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
        }
        
        /* Section styling */
        section {
            background: white;
            border-radius: 20px;
            padding: 25px;
            margin-bottom: 30px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        
        h2 {
            color: #1e293b;
            margin-bottom: 20px;
            border-left: 4px solid #3b82f6;
            padding-left: 15px;
        }
        
        h3 {
            color: #334155;
            margin: 15px 0 10px 0;
        }
        
        /* DEMO 1: Margin Collapse Antar Elemen */
        .demo-box {
            background: #3b82f6;
            color: white;
            padding: 15px;
            text-align: center;
            border-radius: 8px;
        }
        
        .margin-bottom-30 {
            margin-bottom: 30px;
        }
        
        .margin-top-40 {
            margin-top: 40px;
        }
        
        /* DEMO 2: Margin Collapse Parent-Child */
        .parent-collapse {
            background: #f1f5f9;
            margin-top: 20px;
        }
        
        .child-collapse {
            background: #22c55e;
            color: white;
            padding: 15px;
            text-align: center;
            margin-top: 30px;
        }
        
        .parent-fixed {
            background: #f1f5f9;
            margin-top: 20px;
            padding-top: 1px;  /* mencegah collapse */
        }
        
        /* DEMO 3: Negative Margin - Overlap */
        .overlap-container {
            background: #f1f5f9;
            padding: 30px;
            text-align: center;
        }
        
        .overlap-box {
            display: inline-block;
            width: 80px;
            height: 80px;
            background: #8b5cf6;
            color: white;
            line-height: 80px;
            text-align: center;
            border-radius: 8px;
            margin: 0 -10px;
            transition: transform 0.2s, z-index 0s;
        }
        
        .overlap-box:hover {
            transform: scale(1.1);
            position: relative;
            z-index: 1;
        }
        
        /* DEMO 4: Negative Margin - Avatar Melampaui */
        .profile-card {
            background: white;
            border-radius: 16px;
            padding: 20px;
            text-align: center;
            width: 280px;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        }
        
        .avatar {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            border-radius: 50%;
            margin: -40px auto 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: white;
            border: 4px solid white;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        /* Info box */
        .info-box {
            background: #eef2ff;
            padding: 20px;
            border-radius: 12px;
            margin-top: 20px;
        }
        
        .info-box code {
            background: #e2e8f0;
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        
        hr {
            margin: 20px 0;
            border: none;
            border-top: 1px solid #e2e8f0;
        }
        
        .flex-demo {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            margin-top: 20px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1 style="text-align: center; margin-bottom: 30px;">Margin Collapse & Negative Margin</h1>
        
        <!-- DEMO 1: Margin Collapse Antar Elemen -->
        <section>
            <h2>1. Margin Collapse Antar Elemen Bersebelahan</h2>
            <p>Dua elemen block dengan margin-bottom dan margin-top akan collapse (menyatu). Jarak yang digunakan adalah nilai terbesar.</p>
            
            <div class="demo-box margin-bottom-30">Kotak A (margin-bottom: 30px)</div>
            <div class="demo-box margin-top-40">Kotak B (margin-top: 40px)</div>
            <p style="margin-top: 10px; font-size: 14px;">Hasil: Jarak antara kedua kotak adalah <strong>40px</strong> (bukan 70px) karena margin collapse - nilai terbesar yang dipakai.</p>
        </section>
        
        <!-- DEMO 2: Margin Collapse Parent-Child -->
        <section>
            <h2>2. Margin Collapse Parent dan Child</h2>
            <p>Margin child dapat collapse dengan margin parent jika tidak ada padding/border yang memisahkan.</p>
            
            <h3>2a. Dengan Margin Collapse (terjadi collapse)</h3>
            <div class="parent-collapse">
                <div class="child-collapse">Child dengan margin-top: 30px</div>
            </div>
            <p style="margin-top: 10px; font-size: 14px;">Margin parent dan child collapse → jarak dari tepi parent adalah 30px.</p>
            
            <h3 style="margin-top: 25px;">2b. Dengan Pencegahan Collapse (padding pada parent)</h3>
            <div class="parent-fixed">
                <div class="child-collapse">Child dengan margin-top: 30px (parent diberi padding-top: 1px)</div>
            </div>
            <p style="margin-top: 10px; font-size: 14px;">Dengan padding pada parent, margin child tetap berada di dalam parent.</p>
        </section>
        
        <!-- DEMO 3: Negative Margin - Overlap -->
        <section>
            <h2>3. Negative Margin untuk Overlap</h2>
            <p>Margin negatif dapat membuat elemen saling tumpang tindih.</p>
            
            <div class="overlap-container">
                <div class="overlap-box">1</div>
                <div class="overlap-box">2</div>
                <div class="overlap-box">3</div>
                <div class="overlap-box">4</div>
            </div>
            <p style="margin-top: 10px; font-size: 14px;">Kotak saling tumpang tindih karena margin-left dan margin-right: -10px. Hover untuk efek zoom.</p>
        </section>
        
        <!-- DEMO 4: Negative Margin - Avatar Melampaui -->
        <section>
            <h2>4. Negative Margin: Avatar Melampaui Kartu</h2>
            <p>Margin-top negatif pada avatar membuatnya keluar dari batas kartu.</p>
            
            <div class="flex-demo">
                <div class="profile-card">
                    <div class="avatar">JD</div>
                    <h3>John Doe</h3>
                    <p>Frontend Developer</p>
                </div>
                <div class="profile-card">
                    <div class="avatar">JS</div>
                    <h3>Jane Smith</h3>
                    <p>UI/UX Designer</p>
                </div>
            </div>
            <p style="margin-top: 10px; font-size: 14px;">Avatar memiliki margin-top: -40px sehingga melampaui batas kartu.</p>
        </section>
        
        <!-- INFO BOX -->
        <div class="info-box">
            <h3>Ringkasan Margin Collapse & Negative Margin</h3>
            <ul>
                <li><strong>Margin Collapse</strong> terjadi pada margin vertikal elemen block yang bersebelahan (nilai terbesar yang dipakai)</li>
                <li>Margin Collapse juga terjadi antara parent dan child jika tidak ada border/padding pemisah</li>
                <li>Cara mencegah: beri padding/border pada parent, atau gunakan overflow: auto/hidden</li>
                <li><strong>Negative Margin</strong> (contoh: margin-top: -20px) menarik elemen ke arah berlawanan</li>
                <li>Negative margin berguna untuk: overlap, membuat avatar melampaui batas kartu, dan efek kreatif lainnya</li>
                <li>Margin horizontal (kiri/kanan) TIDAK mengalami collapse</li>
            </ul>
            
            <hr>
            
            <h3>Perbandingan Margin Positif vs Negatif:</h3>
            <ul>
                <li><code>margin-top: 20px;</code> → elemen bergerak ke bawah (menjauh dari elemen di atas)</li>
                <li><code>margin-top: -20px;</code> → elemen bergerak ke atas (mendekati elemen di atas)</li>
                <li><code>margin-left: 20px;</code> → elemen bergerak ke kanan</li>
                <li><code>margin-left: -20px;</code> → elemen bergerak ke kiri</li>
            </ul>
        </div>
    </div>

</body>
</html>

Hasil visual halaman demo:

Margin Collapse Antar Elemen

Kotak A (margin-bottom: 25px)

Kotak B (margin-top: 40px)

Jarak antara kedua kotak adalah 40px (bukan 65px) karena margin collapse.

Negative Margin - Avatar Melampaui

John Doe

Developer

Ringkasan: Margin collapse menggabungkan margin vertikal, negative margin menarik elemen ke arah berlawanan.

Tabel Perbandingan Margin Collapse Scenarios

Skenario	Apakah Collapse?	Hasil Jarak
Elemen A (margin-bottom: 20px) + Elemen B (margin-top: 30px)	Ya (collapse)	30px (yang terbesar)
Parent (margin-top: 20px) + Child (margin-top: 30px) tanpa batasan	Ya (collapse)	30px (yang terbesar) keluar parent
Parent (margin-top: 20px) + Child (margin-top: 30px) dengan padding/border parent	Tidak –s	20px (parent) + 30px (child di dalam)
Elemen A (margin-right: 20px) + Elemen B (margin-left: 30px) horizontal	Tidak (horizontal tidak collapse)	20px + 30px = 50px (dijumlahkan)

Kesalahan Umum Pemula

Berpikir margin vertikal selalu dijumlahkan → Tidak, margin collapse membuat margin vertikal tidak dijumlahkan, yang terbesar yang dipakai.
Mengira margin collapse terjadi pada semua elemen → Hanya terjadi pada elemen block, tidak pada inline-block, flex, atau grid item.
Lupa bahwa parent dan child bisa collapse → Sering menyebabkan jarak di luar parent yang tidak diinginkan.
Menggunakan negative margin tanpa memahami efeknya → Negative margin dapat menyebabkan elemen bertumpuk atau keluar dari container.
Mengira negative margin sama dengan position: relative + top/left → Negative margin mempengaruhi aliran dokumen (flow), sedangkan position relative tidak.

Debugging Tips:

Buka Developer Tools (F12) → inspect elemen → lihat Box Model di tab Styles untuk melihat margin aktual
Untuk melihat margin collapse, perhatikan jarak antar elemen di halaman
Gunakan outline untuk melihat batas elemen tanpa mempengaruhi layout (outline tidak mempengaruhi margin collapse)

Latihan Singkat

Buat dua div dengan margin-bottom: 30px dan margin-top: 50px, lihat jaraknya
Buat parent div dengan margin-top: 20px dan child div dengan margin-top: 40px, amati collapsenya
Tambahkan padding: 1px pada parent, lihat perbedaannya
Buat 3 kotak inline-block dengan margin: 0 -10px untuk membuat overlap
Buat kartu profil dengan avatar yang melampaui batas kartu menggunakan margin-top negatif

Intisari Hari Ini

Margin Collapse → margin vertikal elemen block bersebelahan bergabung (nilai terbesar yang dipakai)
Margin collapse juga terjadi antara parent dan child jika tidak ada padding/border pemisah
Cara mencegah: beri padding/border pada parent, atau gunakan overflow: auto/hidden
Margin horizontal (kiri/kanan) TIDAK mengalami collapse
Negative Margin → margin dengan nilai negatif (contoh: -20px)
Negative margin berguna untuk overlap, membuat avatar melampaui batas, dan efek kreatif lainnya
Hati-hati menggunakan negative margin karena bisa menyebabkan tumpang tindih yang tidak diinginkan

Tantangan: Buat sebuah Halaman Testimoni dengan efek kartu yang saling tumpang tindih (overlap) menggunakan negative margin! Persyaratan:

3 kartu testimoni dalam satu baris (gunakan flexbox atau grid)
Kartu memiliki background putih, border-radius 16px, padding 20px
Setiap kartu memiliki margin kiri/kanan negatif sehingga kartu saling tumpang tindih (overlap sekitar 20px)
Saat hover, kartu yang di-hover memiliki z-index lebih tinggi dan scale(1.05)
Avatar di dalam kartu menggunakan margin-top negatif agar melampaui batas kartu
Tambahkan kotak penjelasan yang menerapkan margin collapse dan negative margin yang digunakan

Selamat mencoba!

Artikel Sebelumnya: CSS Dasar #15 - Box Model: Margin, Padding, Border, dan Content
Artikel Selanjutnya: CSS Dasar #17 - Width, Height, Min-Width, Max-Width, Min-Height, Max-Height

CSS Dasar #16 - Margin Collapse dan Negative Margin

1. Margin Collapse (Margin yang Menyatu)

Contoh Margin Collapse Antar Elemen Bersebelahan:

Margin Collapse Antara Parent dan Child:

Cara Mencegah Margin Collapse:

2. Negative Margin

Contoh Negative Margin:

Penggunaan Negative Margin yang Umum:

Contoh: Membuat Overlap dengan Negative Margin

Contoh: Membuat Gambar Melampaui Batas Container

John Doe

Contoh Proyek: Layout dengan Margin Collapse dan Negative Margin

Margin Collapse Antar Elemen

Negative Margin - Avatar Melampaui

John Doe

Tabel Perbandingan Margin Collapse Scenarios

Kesalahan Umum Pemula

Latihan Singkat

Intisari Hari Ini

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

Categories

Main Tags

Latest Posts

Popular Posts

HTML Dasar #0 - Daftar Isi - DASAR-DASAR HTML UNTUK PEMULA

HTML Dasar #9 - Membuat Tabel Sederhana: table, tr, td, th

HTML Dasar #8 - Membuat Daftar: Ordered List (ol), Unordered List (ul), List Item (li)

نموذج الاتصال