Bagaimana untuk Mencegah Keruntuhan Margin CSS Tanpa Menjejaskan Reka Letak?

Cara Mencegah Margin Runtuh

Dalam CSS, apabila jidar unsur bersebelahan bertindih, ia boleh runtuh, mewujudkan isu jarak yang tidak dijangka. Tingkah laku ini direka bentuk untuk mengelakkan pertindihan dan mengekalkan reka letak yang konsisten, tetapi mungkin sukar untuk dilumpuhkan apabila anda memerlukan kawalan sempurna piksel.

Penyelesaian Standard

Lazimnya, Tutorial CSS mencadangkan penambahan sempadan atau padding pada elemen untuk memecahkan keruntuhan. Walau bagaimanapun, penyelesaian ini mengubah penampilan visual, yang mungkin tidak sesuai untuk reka letak yang bergantung pada jarak dan imej latar belakang yang tepat.

Div Spacer Halimunan

Untuk mengelakkan keruntuhan margin tanpa menjejaskan reka letak, anda boleh menggunakan div pengatur jarak yang tidak kelihatan dengan sifat tertentu:

<div>

Div ini bertindak sebagai pemisah antara elemen, dengan berkesan memecahkan keruntuhan jidar.

Kod Contoh

Kod berikut menunjukkan penggunaan div pengatur jarak yang tidak kelihatan:

    
        <div>

Dalam contoh ini, jidar dua div akan kekal utuh, memastikan jarak yang diingini tanpa sebarang visual kesan sampingan.

Atas ialah kandungan terperinci Bagaimana untuk Mencegah Keruntuhan Margin CSS Tanpa Menjejaskan Reka Letak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!