Bagaimanakah Margin Runtuh Berfungsi dalam CSS?

Margin Runtuh: Penjelasan

Dalam CSS, margin runtuh ialah tingkah laku yang mempengaruhi jarak elemen bersebelahan pada halaman web.

Memahami Margin Runtuh

Bertentangan dengan kepercayaan popular, keruntuhan jidar tidak berlaku apabila anda tidak mempunyai jidar, pelapik atau jidar yang ditetapkan pada elemen. Sebaliknya, ia berlaku apabila terdapat dua jidar menegak bersebelahan. Dalam kes sedemikian, yang lebih besar daripada dua jidar digunakan, manakala yang lebih kecil diabaikan.

Contoh Margin Runtuh

Pertimbangkan contoh berikut:

<div>Block A</div>
<div>Block B</div>

Anggapkan Blok A mempunyai jidar bawah 3em dan Blok B mempunyai jidar atas 2em. Tanpa sebarang penggayaan lain digunakan, jarak menegak antara blok akan menjadi 3em kerana margin bawah Blok A adalah lebih besar daripada kedua-duanya.

Mencegah Margin Runtuh

Anda boleh mengelakkan jidar runtuh dengan menambahkan jidar atau pelapik pada elemen bersebelahan. Ini mewujudkan jurang antara elemen, walaupun jidar ditetapkan kepada 0.

Sebagai contoh, menambah sempadan atas 1px pada Blok B akan menghasilkan jarak menegak 5em antara blok.

Kesimpulan

Keruntuhan margin ialah aspek asas penggayaan CSS yang mempengaruhi jarak elemen pada halaman web. Adalah penting untuk memahami keadaan di mana margin runtuh berlaku untuk membuat reka letak yang dimaksudkan dan mengelakkan hasil yang tidak dijangka.

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