Jelaskan secara singkat masalah margin overlay dalam tata letak halaman web CSS

Anda akan menemui banyak masalah aneh saat menata halaman web CSS. Masalah ini mungkin disebabkan oleh bug browser atau kurangnya pemahaman tentang properti CSS. Artikel ini membahas masalah overlay margin CSS.

Penggabungan margin berarti ketika dua margin vertikal bertemu, keduanya membentuk satu margin. Ketinggian margin yang digabungkan sama dengan tinggi kedua margin yang digabungkan. Penggabungan margin (tumpang tindih) adalah konsep yang cukup sederhana. Namun, dalam praktiknya tata letak halaman web dapat menyebabkan banyak kebingungan.
Ketika sebuah elemen muncul di atas elemen lain, tepi luar bawah elemen pertama

Ketika suatu elemen terkandung dalam elemen lain (dengan asumsi tidak ada bantalan atau batas yang memisahkan margin), margin atas dan/atau bawahnya juga digabungkan. Silakan lihat gambar di bawah ini:

Meski terkesan aneh, margin bahkan bisa menyatu dengan dirinya sendiri.

Misalkan Anda memiliki elemen kosong yang memiliki margin tetapi tidak memiliki batas atau bantalan. Dalam hal ini, margin atas dan margin bawah saling bertabrakan, dan keduanya bergabung:

Jika margin ini bertemu dengan margin elemen lain, maka margin tersebut juga akan digabungkan:

Inilah sebabnya rangkaian elemen paragraf hanya memakan sedikit ruang karena semua marginnya digabungkan menjadi satu margin kecil.

Penggabungan margin mungkin tampak sedikit aneh pada awalnya, namun dalam praktiknya, hal ini masuk akal. Ambil contoh, halaman teks biasa yang terdiri dari beberapa paragraf. Spasi di atas paragraf pertama sama dengan margin atas paragraf. Tanpa penggabungan margin, margin antara seluruh paragraf berikutnya akan menjadi jumlah margin atas dan bawah yang berdekatan. Artinya jarak antar paragraf dua kali lebih besar dari bagian atas halaman. Jika terjadi penggabungan margin, margin atas dan bawah antar paragraf digabungkan, sehingga jarak di mana pun konsisten.

Penggabungan margin hanya terjadi untuk margin vertikal kotak blok dalam aliran dokumen normal. Margin antara kotak sejajar, kotak melayang, atau kotak yang diposisikan secara absolut tidak digabungkan.