Belajar Koding HTML & CSS Bagian 15: Membuat Ukuran Margins Collape
.png)
Margin collapse adalah perilaku
dalam CSS di mana margin vertikal (atas dan bawah) dari elemen-elemen blok yang
berdekatan digabungkan menjadi satu margin tunggal, bukan dijumlahkan. Fenomena
ini hanya berlaku untuk margin vertikal dan dapat memengaruhi tata letak
halaman jika tidak dipahami dengan baik.DEV
Community
📌 Kapan Margin Collapse Terjadi?
Margin collapse dapat terjadi dalam
beberapa situasi:
- Antara
Elemen Sibling (Saudara) yang Berdekatan: Jika dua elemen blok berada berurutan tanpa pemisah,
margin bawah elemen pertama dan margin atas elemen kedua akan digabungkan
menjadi satu margin dengan nilai terbesar di antara keduanya.
- Antara
Elemen Induk dan Anak:
Jika elemen induk tidak memiliki padding, border, atau konten, dan elemen
anak memiliki margin atas, margin tersebut dapat "naik" dan
bergabung dengan margin atas elemen induk.Medium
- Pada
Elemen Kosong:
Jika elemen blok tidak memiliki konten, padding, border, atau tinggi,
margin atas dan bawahnya dapat saling menggabung menjadi satu margin.MDN Web Docs
🧪 Contoh Margin Collapse
Pertimbangkan contoh berikut:
html
<style>
h1 {
margin-bottom:
50px;
}
h2 {
margin-top: 20px;
}
</style>
<h1>Judul Utama</h1>
<h2>Subjudul</h2>
Secara logika, Anda mungkin
mengharapkan jarak vertikal antara <h1> dan <h2> sebesar 70px (50px + 20px). Namun,
karena margin collapse, jarak sebenarnya adalah 50px, yaitu nilai margin yang
lebih besar di antara keduanya.
🛠️ Cara Mencegah Margin Collapse
Untuk menghindari margin collapse,
Anda dapat menggunakan beberapa teknik berikut:
- Menambahkan
Padding atau Border:
Memberikan padding atau border pada elemen induk akan mencegah margin anak
bergabung dengan margin induk.
- Menggunakan
Properti overflow: Mengatur overflow elemen induk ke nilai selain visible (misalnya, hidden atau auto) akan mencegah margin
collapse.
- Menghindari
Elemen Kosong:
Memastikan elemen memiliki konten, padding, atau border akan mencegah
margin atas dan bawahnya saling menggabung.
🎓 Sumber Belajar Tambahan
Untuk pemahaman lebih lanjut tentang
margin collapse, Anda dapat merujuk ke sumber-sumber berikut:
- CSS
Margin Collapse - W3Schools
- Mastering
Margin Collapsing - MDN Web Docs
- The
Rules of Margin Collapse - CSS-Tricks
🎥 Video Penjelasan Margin Collapse
Untuk penjelasan visual, berikut adalah video yang membahas margin collapse dalam CSS:
Berikut adalah contoh lengkap kode
HTML dan CSS yang menunjukkan perilaku margin collapse serta cara
mencegahnya.
📄 Contoh 1: Margin Collapse Antara
Elemen Sibling
Dalam contoh ini, dua elemen <div>
memiliki margin vertikal yang akan mengalami margin collapse.
<!DOCTYPE html>
<html lang="id">
<head>
<meta
charset="UTF-8">
<title>Contoh
Margin Collapse</title>
<style>
.box1 {
background-color: lightblue;
margin-bottom:
50px;
padding: 20px;
}
.box2 {
background-color: lightgreen;
margin-top:
30px;
padding: 20px;
}
</style>
</head>
<body>
<div
class="box1">Kotak 1</div>
<div
class="box2">Kotak 2</div>
</body>
</html>
Tampilan Hasil (Output) Margin Collapse Antara Elemen Sibling
Penjelasan: Meskipun .box1
memiliki margin-bottom: 50px dan .box2 memiliki margin-top: 30px, jarak vertikal antara kedua elemen tersebut bukan 80px,
melainkan 50px. Ini karena margin vertikal yang berdekatan mengalami margin
collapse, dan hanya margin terbesar yang diterapkan.
🛠️ Contoh 2: Mencegah Margin Collapse
Untuk mencegah margin collapse,
Anda dapat menambahkan padding, border, atau mengatur properti overflow
pada elemen induk.
<!DOCTYPE html>
<html lang="id">
<head>
<meta
charset="UTF-8">
<title>Mencegah Margin Collapse</title>
<style>
.container {
background-color: #f0f0f0;
padding: 10px;
/* Menambahkan padding untuk mencegah margin collapse */
}
.child {
background-color: #add8e6;
margin-top:
30px;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="child">Konten Anak</div>
</div>
</body>
</html>
 |
| Tampilan Hasil (Output) Mencegah Margin Collapse |
Penjelasan: Dalam contoh ini, elemen .child
memiliki margin-top: 30px. Namun, karena elemen induk .container
memiliki padding: 10px, margin atas dari .child
tidak akan mengalami margin collapse dengan margin atas dari .container.
📚 Sumber Belajar Tambahan
Untuk pemahaman lebih lanjut tentang
margin collapse, Anda dapat merujuk ke sumber-sumber / REFERENSI berikut:
- CSS Margin Collapse - W3Schools
- Mastering
Margin Collapsing - MDN Web Docs
- The
Rules of Margin Collapse - CSS-Tricks
0 Response to "Belajar Koding HTML & CSS Bagian 15: Membuat Ukuran Margins Collape"
Post a Comment