Bagaimanakah Margin Menegak Runtuh Berfungsi dalam Elemen Bersarang?

Mekanik Keruntuhan Margin Menegak Bersarang

Memahami konsep keruntuhan jidar menegak dalam elemen bersarang boleh mencabar untuk pemula. Dalam artikel ini, kami akan menafikan gelagat ini dengan penerangan dan contoh yang dipermudahkan.

Asas Keruntuhan Margin Menegak

Keruntuhan jidar menegak merujuk kepada situasi di mana jidar menegak bersebelahan elemen runtuh atau bergabung menjadi satu jidar. Runtuhan ini berlaku apabila dua atau lebih jidar menegak bersentuhan, menghasilkan jidar tunggal yang lebih besar.

Elemen Bersarang dan Margin Runtuh

Apabila elemen bersarang antara satu sama lain, satu set peraturan unik digunakan untuk keruntuhan jidar menegak. Item bersarang mempamerkan fenomena yang dikenali sebagai "snuggling", di mana ia dijajar rapat dengan permulaan bekasnya melainkan dipisahkan oleh elemen tertentu, seperti jidar atau teks sebelumnya.

Contoh

Pertimbangkan struktur HTML berikut:

<code class="html"><div id="outer">
    <div id="inner">
        A
    </div>
</div></code>

Jika div luar mempunyai margin atas 10px dan div dalam mempunyai margin atas 20px, jidar menegak runtuh kepada 20px (maksimum daripada dua margin). Akibatnya, div dalam menyeluk ke bahagian atas div luar, seperti yang digambarkan di bawah:

[Imej keruntuhan jidar bersarang]

Mencegah Keruntuhan Margin

Keruntuhan boleh dicegah dengan menggunakan:

• Sempadan antara elemen bersarang
• Kandungan terdahulu dalam bekas (mis., teks)
• Bukan -memecahkan ruang putih

Dengan memperkenalkan mana-mana elemen ini, mekanisme keruntuhan rosak dan jidar individu digunakan.

Atas ialah kandungan terperinci Bagaimanakah Margin Menegak Runtuh Berfungsi dalam Elemen Bersarang?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!