Margin Meruntuhkan dalam CSS: Panduan Pemula

pengenalan

Tiada yang lebih mengecewakan daripada menerapkan gaya dan tidak berfungsi seperti yang diharapkan. Margin Runtuh ialah satu fenomena yang menyebabkan hasil penggayaan yang tidak dijangka. Oleh itu, apakah margin runtuh dan bagaimana ia mempengaruhi margin dalam CSS?

Margin Runtuh

Jing yang runtuh berpunca daripada jidar sifat CSS, yang mengawal jarak di luar elemen. Seperti namanya, jidar runtuh berlaku apabila jidar unsur bersebelahan bergabung atau 'runtuh' menjadi satu, bukannya menjumlahkan. Ini biasanya berlaku antara unsur adik beradik atau antara unsur ibu bapa dan anak. Contohnya, jika dua elemen adik-beradik mempunyai jidar—satu dengan jidar 20px bawah dan satu lagi dengan jidar atas 30px—anda mungkin menjangkakan jumlah jidar ialah 50px. Walau bagaimanapun, disebabkan jidar runtuh, hanya jidar 30px yang lebih besar akan digunakan dan jidar 20px yang lebih kecil akan diruntuhkan.

.element1 {
    margin-bottom: 20px;
}
.element2 {
    margin-top: 30px;
}

Selain itu, dalam kes di mana unsur induk tidak mempunyai pelapik atau jidar, dan unsur anaknya mempunyai jidar atas, jidar mungkin "runtuh" ​​melebihi induk, sekali gus menjejaskan peletakan ibu bapa.

.parent {
    margin-top: 0;
}
.child {
    margin-top: 20px;
}

Bidar atas 20px daripada .child mungkin runtuh di luar .parent, menurunkan keseluruhan induk sebanyak 20px.

Ini boleh mengelirukan pembangun noob (saya tidak pernah tahu mengenainya sehingga baru-baru ini), kerana jarak yang terhasil mungkin tidak sepadan dengan jangkaan mereka.

Cara untuk mengatasinya

• Tambah Padding atau Border: menambahkan sedikit padding atau sempadan pada elemen induk akan menghalang keruntuhan margin.

.parent {
    padding-top: 1px; /* or border-top: 1px solid transparent; */
}

• Penggunaan sifat limpahan: Apabila sifat limpahan induk ditetapkan kepada apa-apa selain daripada yang boleh dilihat (cth., limpahan: tersembunyi;), ia boleh mengelakkan keruntuhan margin.

.parent {
    overflow: hidden;
}

• Gunakan Flexbox atau Layout Grid: Kaedah reka letak ini mengelakkan isu keruntuhan margin mengikut reka bentuk.

Contoh Flexbox:

.parent {
    display: flex; /* Flexbox layout */
    flex-direction: column; /* Stack children vertically */
    border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    margin: 20px 0; /* Vertical margins that won't collapse */
    background-color: lightblue;
}

Contoh Grid

.parent {
   display: grid; /* Grid layout */
   grid-template-rows: auto auto; /* Define two rows */
   border: 1px solid #000; /* Just for visibility */
 }

.child1, .child2 {
     margin: 20px 0; /* Vertical margins */
     background-color: lightgreen;
 }

• Gunakan Float atau Inline-Block: Mengapungkan elemen kanak-kanak atau menetapkannya untuk dipaparkan: inline-block; juga akan menghalang margin daripada runtuh. Walau bagaimanapun, saya jarang melihat terapung lagi tetapi adalah baik untuk mengetahui sekiranya terdapat asas kod warisan.

Contoh apungan:

.parent {
    border: 1px solid #000; /* Just for visibility */
 }

 .child1, .child2 {
     float: left; /* Prevents margin collapsing */
     width: 100%; /* Full width */
     margin: 20px 0; /* Vertical margins */
     background-color: lightcoral;
 }

Contoh blok sebaris

.parent {
   border: 1px solid #000; /* Just for visibility */
}

.child1, .child2 {
    display: inline-block; /* Prevents margin collapsing */
    width: 100%; /* Full width */
    margin: 20px 0; /* Vertical margins */
    background-color: lightyellow;
}

Kesimpulan

Memahami keruntuhan jidar boleh menyumbang dengan ketara kepada jarak yang konsisten dan dijangka dalam reka letak web anda, terutamanya apabila bekerja dengan elemen peringkat blok. Perlu diingat bahawa elemen sebaris seperti , , , dsb. secara amnya tidak terjejas oleh keruntuhan jidar disebabkan oleh kelakuannya yang berbeza dalam menjana jidar menegak berbanding elemen peringkat blok. Margin runtuh terutamanya menimbulkan cabaran dengan elemen peringkat blok, seperti

,

,

, dan lain-lain, kerana ia mungkin mempunyai jidar menegak yang berinteraksi antara satu sama lain.

Rujukan

• Mdn
• w3Sekolah

Atas ialah kandungan terperinci Margin Meruntuhkan dalam CSS: Panduan Pemula. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css Float if for Property this display overflow margin padding border

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn