Bagaimanakah Keruntuhan Margin Menegak Bersarang Berfungsi dalam CSS?

Memahami Keruntuhan Margin Menegak Bersarang untuk Pemula CSS

Keruntuhan jidar menegak bersarang ialah konsep asas dalam reka letak CSS yang mengawal cara jidar berinteraksi apabila elemen bersarang di antara satu sama lain. Untuk memahaminya, mari kita terokai peraturan yang menentukan tingkah laku ini:

• Runtuh Margin: Apabila dua jidar bertemu, jidar itu runtuh menjadi satu jidar, dengan nilai yang diruntuhkan ialah maksimum daripada dua jidar individu.
• Snuggling Margin: Jika hanya jidar memisahkan elemen bersarang daripada elemen yang mengandunginya, elemen bersarang akan "menyumbat" ke permulaan elemen yang mengandungi.
• Pengecualian Aliran: Margin runtuh dan snuggling tidak digunakan pada elemen di luar aliran biasa, seperti terapung, diposisikan secara mutlak atau diposisikan elemen tetap.

Pertimbangkan contoh berikut untuk menggambarkan peraturan ini:

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

Memandangkan gaya ini:

<code class="css">#outer {
    margin-top: 10px;
    background: blue;
    height: 100px;
}
#inner {
    margin-top: 20px;
    background: red;
    height: 33%;
    width: 33%;
}</code>

• Jing luar dan dalam runtuh kerana bersentuhan, menghasilkan jidar gabungan 20px.
• Div dalam menyeluk ke bahagian atas div luar kerana tiada apa yang memisahkannya.

Walau bagaimanapun, perubahan yang sedikit, seperti menambah watak ruang yang tidak putus antara elemen atau memberikan sempadan dalam div, akan menghalang jidar daripada runtuh. Ini kerana ruang atau sempadan mewujudkan pemisahan antara jidar.

Memahami peraturan ini membolehkan pembangun meramal dan mengawal gelagat reka letak elemen bersarang, memastikan ketekalan merentas pelayar dan hasil yang boleh diramal.

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