Mengapa Margin Kadang-kadang Runtuh dalam Ibu Bapa Mereka?

Kurungan Margin oleh Ibu Bapa: Kes Ingin Tahu

Dalam bidang CSS, tingkah laku jidar boleh membingungkan. Apabila elemen dengan jidar bersarang dalam yang lain, elemen induk tidak selalu menyertakan jidar tersebut. Ketidakkonsistenan ini telah membingungkan pembangun sejak sekian lama.

Pencetus untuk Berkurung

Pemerhatian mendedahkan bahawa pencetus tertentu boleh menyebabkan ibu bapa menyelubungi jidar kanak-kanak, termasuk:

• sempadan: pepejal
• kedudukan: mutlak
• paparan: blok sebaris
• limpahan: auto

The Teka-teki Margin

Seseorang akan menganggap bahawa pembendungan margin adalah standard, tetapi gelagat lalai div biasa tidak termasuk margin. Mengapakah semua kecuali lalai ini menganggap kurungan margin?

Spesifikasi W3C

Spesifikasi W3C memberi penerangan tentang tingkah laku ini, tetapi penerangannya berbelit-belit. Pada asasnya, "margin runtuh" ​​menggabungkan margin bersebelahan menjadi margin tunggal. Dalam kes unsur induk, jika jidar kanak-kanak bercantum dengan jidarnya sendiri, ia mungkin runtuh, menjejaskan kedudukan unsur tersebut.

Senario Khusus

Untuk menghuraikan:

• Jika jidar kanak-kanak runtuh dengan jidar atas ibu bapa, jidar atas kanak-kanak itu sejajar dengan jidar ibu bapa.
• Jika jidar atas ibu bapa dikecualikan daripada runtuh, jidar atas anak diposisikan seolah-olah ia mempunyai sempadan bawah bukan sifar.

Kesimpulan

Memahami peraturan ini untuk pembendungan margin adalah penting untuk penggayaan CSS yang berkesan. Dengan melaraskan pencetus yang dinyatakan di atas, pembangun boleh mengawal kemasukan atau pengecualian margin dalam elemen induk.

Atas ialah kandungan terperinci Mengapa Margin Kadang-kadang Runtuh dalam Ibu Bapa Mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!