CSSda chegaralarni yopishtirish nima?

CSS-da margin collapsing (chekilash) hodisasi, yonma-yon joylashgan ikki yoki undan ortiq bloklarning vertikal chegaralari birlashib, bitta chegaraga aylanadigan hodisadir. Bu umumiy chegaraning o'lchami, birlashayotgan chegaralarning eng katta qiymati bilan belgilanadi.

Asosiy qoidalar:

• Faqat vertikal chegaralar (margin-top va margin-bottom) birlashadi. Gorizontal chegaralar birlashmaydi.
• Faqat yonma-yon elementlarning chegaralari, agar ular orasida boshqa elementlar, padding, border yoki blok ichki mazmuni bo'lmasa, birlashadi.
• Birinchi bolaning yuqori chegarasi, agar ular orasida padding, border yoki boshqa mazmun bo'lmasa, uning ota-ona bilan birlashadi.
• Oxirgi bolaning pastki chegarasi, agar ular orasida padding, border yoki boshqa mazmun bo'lmasa, uning ota-ona bilan birlashadi.
• Bo'sh elementlarning yuqori va pastki chegaralari, agar ular padding, border yoki mazmun bilan to'ldirilmagan bo'lsa, birlashishi mumkin.
• Agar birlashayotgan chegaralardan biri manfiy bo'lsa, yakuniy o'lcham, musbat va manfiy qiymatlarning yig'indisi yoki ikkalasi ham manfiy bo'lsa, absolyut qiymati bilan hisoblanadi.

Misol:

<div class="box1">Element 1</div>
<div class="box2">Element 2</div>

.box1 {
  margin-bottom: 20px;
}

.box2 {
  margin-top: 30px;
}

Bu holatda, box1 va box2 orasidagi vertikal masofa 30px bo'ladi (20px va 30px orasidagi eng katta qiymat), 50px emas.

Oldini olish usullari:

• Elementlar orasiga padding yoki border qo'shish.
• Yangi formatlash blokini yaratish (masalan, overflow: hidden, display: flow-root yoki suzuvchi elementlar yordamida).
• Elementlar uchun display: inline-block, display: flex yoki display: grid ni ishlatish.
• Absolyut joylashishni qo'llash.