Bagaimanakah Keruntuhan Margin Menegak Bersarang Berfungsi dalam CSS?

Memahami Nuansa Margin Menegak Bersarang Runtuh

Dalam CSS, konsep margin runtuh memainkan peranan penting dalam menentukan jarak antara elemen pada halaman web. Apabila jidar unsur bersebelahan menegak menyentuh, ia runtuh menjadi satu jidar, mengakibatkan tingkah laku yang tidak dijangka. Jidar menegak bersarang runtuh merumitkan lagi tingkah laku ini.

Mekanisme Margin Bersarang Runtuh

Apabila dua elemen bersarang antara satu sama lain dan marginnya bersentuhan , dua peraturan berikut digunakan:

1. Runtuh Margin: Jidar runtuh menjadi jidar tunggal dengan ketinggian maksimum jidar individu.
2. Meringkuk: Elemen dalaman "merapat" pada sempadan atas bekasnya, menghapuskan sebarang ruang antara elemen.

Sebagai contoh, pertimbangkan HTML dan CSS berikut :

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

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

Dalam kes ini, jidar runtuh kepada 20px (maksimum 10px dan 20px), dan div dalam menyeluk ke bahagian atas div luar.

Walau bagaimanapun, jika mana-mana kandungan atau jidar memisahkan dua jidar, keruntuhan itu hilang. Ini boleh berlaku apabila menambah ruang putih tidak putus atau sempadan antara unsur, seperti yang ditunjukkan di bawah:

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

Nota: Tingkah laku ini tidak digunakan pada elemen yang diletakkan sebagai mutlak, tetap, atau terapung.

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!