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

Tindan Margin dalam Div: Punca dan Penyelesaian

Pembangun sering menghadapi isu pertindihan jidar div, menyebabkan jarak yang tidak diingini dalam reka letak mereka. Untuk menyelesaikan masalah ini, adalah penting untuk memahami gelagat asas jidar.

Dalam coretan kod yang diberikan:

<code class="css">#header .social {
  margin-top: 50px;
}
#header .contact {
  margin: 20px 70px 20px 0;
}
#header .search {
  margin: 10px 0 0;
}</code>

#header .social div mempunyai jidar atas 50px, tetapi di bawahnya, #header .contact div mempunyai jidar atas 20px, manakala #header .search div mempunyai jidar atas 10px.

Apabila dipaparkan, jidar ini runtuh, menyebabkan jidar bawah diabaikan . Hanya margin terbesar antara bahagian bawah div pertama dan bahagian atas yang kedua dipertimbangkan. Tingkah laku ini berlaku hanya jika elemen berkongsi konteks pemformatan blok dan tidak mempunyai padding, jidar atau kotak garis di antaranya.

Untuk mengelakkan kesan runtuh, anda perlu memastikan jarak yang betul antara div. Ini boleh dicapai dengan:

• Menggunakan padding dan bukannya margin: Padding bertindak sebagai jarak dalaman dalam elemen, tidak menjejaskan margin elemen sekeliling.
• Menambah kotak baris: Memasukkan kotak baris kosong (cth.,
  ) di antara div akan mewujudkan pemecahan dalam konteks pemformatan blok, menghalang keruntuhan margin.
• Mengapungkan elemen: Mengapungkan elemen mengeluarkannya daripada aliran, jadi margin tidak akan berinteraksi dengan elemen dalam aliran biasa.

Memahami konsep keruntuhan jidar adalah penting untuk reka bentuk susun atur yang tepat. Dengan menggunakan teknik yang sesuai, pembangun boleh menghalang pertindihan margin dan mencipta jarak yang diingini dalam projek web mereka.

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