Bagaimanakah Margin Menegak Runtuh Berfungsi Dengan Elemen Bersarang dalam CSS?

Memahami Keruntuhan Margin Menegak Bersarang

Konsep keruntuhan jidar menegak dalam CSS boleh membingungkan, terutamanya apabila elemen bersarang. Mari kita pecahkan mekanik dengan penjelasan ringkas.

Dua peraturan penting mengawal keruntuhan margin:

1. Runtuh Jidar Menyentuh: Apabila jidar menegak elemen bersebelahan menyentuh , ia runtuh menjadi satu jidar.
2. Nested Snuggle: Jika hanya jidar memisahkan unsur bersarang, ia "bersarang" bersama-sama, menghapuskan sebarang ruang yang dicipta oleh jidar elemen dalam.

Pertimbangkan struktur HTML berikut:

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

Dan gaya CSS awal:

<code class="CSS">#outer {
    margin-top: 10px;
    background: blue;
    height: 100px;
}

#inner {
    margin-top: 20px;
    background: red;
    height: 33%;
    width: 33%;
}</code>

Dalam senario ini, jidar div bersarang (20px) mencetuskan keruntuhan margin dengan jidar div luar (10px), menghasilkan jumlah jidar 20px untuk keseluruhan blok. Div dalam kemudian meringkuk ke permulaan bekas kerana kekurangan pemisahan bukan margin.

Walau bagaimanapun, jika kami memperkenalkan sebarang pemisahan antara jidar, seperti sempadan atau ruang tidak pecah , runtuh itu rosak. Ini kerana margin yang tidak lagi dianggap "menyentuh" ​​tidak runtuh.

Ingat, peraturan ini tidak terpakai kepada elemen di luar aliran biasa (cth., elemen terapung atau diposisikan secara mutlak). Memahami konsep ini akan membantu anda mengembangkan pemahaman yang jelas tentang cara margin menegak berkelakuan apabila menyarang elemen dalam CSS.

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