Bagaimana Saya Boleh Menghalang Margin CSS Runtuh Tanpa Menjejaskan Rupa Reka Letak?

Mengatasi Margin Runtuh dalam CSS

Margin Runtuh ialah ciri CSS yang menggabungkan jidar bersebelahan menjadi satu jidar yang lebih besar. Ini boleh menjadi masalah untuk reka letak yang bergantung pada jidar sempurna piksel.

Mengelakkan Runtuh dengan Elemen Tambahan

Tutorial CSS lazimnya mencadangkan penambahan sempadan atau pelapik untuk pecah runtuh. Walau bagaimanapun, penyelesaian ini memperkenalkan kesan visual yang tidak diingini.

Pembetulan Spacer Halimunan

Untuk mengelakkan kesan sampingan ini, pertimbangkan untuk menggunakan elemen spacer tidak kelihatan. Elemen ini boleh dicapai dengan:

<div>

Pengambang jarak ini menghalang margin runtuh dengan mencipta ketakselanjaran bersaiz sifar antara elemen.

Contoh

Kod HTML berikut menunjukkan cara menggunakan spacer:

    
        <div>

Kod ini akan memaparkan tiga elemen dengan jidar 100px, tanpa meruntuhkan jidar di antaranya.

Atas ialah kandungan terperinci Bagaimana Saya Boleh Menghalang Margin CSS Runtuh Tanpa Menjejaskan Rupa Reka Letak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!