Bagaimana untuk Mengelakkan Margin Runtuh Antara Div Kanak-kanak dengan `margin-top` dan Div Induk Tanpa Sempadan Atas?

CSS: Mengurus Margin-top apabila Div Induk Kekurangan Sempadan Atas

Apabila elemen anak mempunyai margin atas dan elemen induknya tidak mempunyai sempadan atas, anak itu jidar elemen boleh mencipta ketidakkonsistenan visual. Seperti yang digambarkan dalam imej yang disediakan, div oren kelihatan menolak div hijau ke bawah, walaupun yang terakhir tidak mempunyai sempadan atas.

Untuk menyelesaikan isu ini tanpa menambah sempadan pada div induk, anda boleh melaksanakan penyelesaian yang menghalang keruntuhan margin. Margin runtuh ialah gelagat CSS yang berlaku apabila jidar unsur bersebelahan (dalam kes ini, div hijau dan oren) runtuh menjadi satu jidar.

Untuk mengelakkan jidar runtuh, tambahkan CSS berikut pada elemen induk:

overflow: auto;

Menggunakan overflow:auto ke .body dalam coretan CSS yang disediakan akan menghalang margin-runtuh dan mengekalkan susunan visual yang dikehendaki. Anda boleh mendapatkan butiran lanjut tentang keruntuhan margin dalam spesifikasi W3C: http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Margin Runtuh Antara Div Kanak-kanak dengan `margin-top` dan Div Induk Tanpa Sempadan Atas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!