Mengapa Margin Elemen Div Saya Bertindih dan Bagaimana Saya Boleh Membetulkannya?

Pinggir Bertindih dalam Elemen Div

Soalan:

Mengapa margin div elemen dalam kod saya bertindih, menyebabkan elemen berkumpul?

Kod:

<code class="css">.alignright {float: right}
#header .social {margin-top: 50px;}
#header .social a {display: inline-block;}
#header .social .fb {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .social .twit {width: 64px; height: 1px; padding-top: 60px; overflow: hidden;}
#header .contact {margin: 20px 70px 20px 0; font-size: 14px; font-weight: bold;}
#header .contact span {color: #FFFFFF;}
#header .search {margin: 10px 0 0;}</code>

<code class="html"><div class="alignright">
    <div class="social">
        <a href="#" class="twit"></a>
        <a href="#" class="fb"></a>
    </div><!-- social -->
    <div class="contact">
        Get in Touch: <span>+44 10012 12345</span>            
    </div><!-- contact -->
    <div class="search">
        <form method="post" action="">
            <input type="text" value="" name="s" gtbfieldid="28">
        </form>
    </div><!-- search -->
</div></code>

Jawapan:

Jin bertindih berkemungkinan disebabkan oleh fenomena yang dikenali sebagai "runtuh jidar." Ini berlaku apabila jidar bawah satu elemen dan jidar atas unsur bersebelahan bergabung untuk membentuk jidar tunggal yang lebih besar.

Dalam kod anda, jidar bawah div .sosial dan jidar atas .contact div runtuh, menyebabkan unsur kelihatan terlalu rapat.

Menurut W3C, dua jidar runtuh jika memenuhi kriteria berikut:

• Kedua-dua jidar tergolong dalam blok dalam konteks pemformatan blok yang sama.
• Tiada kotak garisan, ruang kosong, pelapik atau jidar yang memisahkan jidar.
• Kedua-dua jidar terletak pada tepi kotak bersebelahan menegak.

Memandangkan margin dalam kod anda memenuhi kriteria ini, ia akan runtuh.

Penyelesaian:

Terdapat beberapa cara untuk menyelesaikan masalah ini:

• Gunakan pelapik dan bukannya jidar. Pelapik tidak runtuh, jadi menggunakannya dan bukannya jidar untuk elemen jarak akan menghalang isu itu.
• Tambah jelas:kedua-duanya pada bekas induk. Ini akan mencipta konteks pemformatan blok baharu, menghalang jidar daripada runtuh.
• Gunakan terapung. Unsur terapung dialih keluar daripada aliran biasa, yang menghalang jidarnya daripada rebah.

Atas ialah kandungan terperinci Mengapa Margin Elemen Div Saya Bertindih dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!