8-dars

O'zing nomla

Bu darsda margin collapsing va normal flow tushunchalarini o'rganamiz.

1. Margin collapsing nima?

🧠 Margin collapsing degani nima?

Margin collapsing — bu holat:

Ikki yoki undan ortiq vertical marginlar qo'shib ketmaydi, balki eng kattasi yutib ketadi.

❗ Bu faqat vertikal (top/bottom) marginlarda bo'ladi ❗ Horizontal (left/right) marginlar hech qachon collapse bo'lmaydi

📦 1-holat: Ketma-ket elementlar

<div class="a"></div>
<div class="b"></div>

.a {
  margin-bottom: 30px;
}

.b {
  margin-top: 20px;
}

❓ Savol: orasi nechchi px?

❌ 30 + 20 = 50px emas ✅ 30px

👉 Kattasi yutdi → 30px

🧱 2-holat: Ota va bola (eng chalkash joy)

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  background: lightgray;
}

.child {
  margin-top: 40px;
}

❓ Savol: bola pastga tushadimi?

❌ Yo'q 👉 Ota element yuqoridan siljiydi

Bu ko'pchilikni hayron qoldiradi 😵

Nega shunday?

Sababi:

• parent'da border yo'q
• parent'da padding yo'q
• normal flow

👉 Shuning uchun:

child'ning margin-topi

parent'ning margin-topi bilan collapse bo'ladi

🧨 3-holat: Bo'sh elementlar

<div class="a"></div>
<div class="b"></div>

.a {
  margin-bottom: 40px;
}

.b {
  margin-top: 30px;
}

Agar ichida content bo'lmasa ham:

• baribir collapse bo'ladi
• faqat kattasi qoladi

❓ Qachon margin collapse bo'ladi?

Faqat agar:

• elementlar normal flowda bo'lsa
• vertical margin bo'lsa
• orasida border / padding / inline content bo'lmasa

✅ Qachon collapse bo'lmaydi?

Mana oltin ro'yxat 👇

Margin collapse bo'lmaydi, agar:

• Element display: flex yoki grid bo'lsa
• Element position: absolute yoki fixed bo'lsa
• Ota elementda padding bo'lsa
• Ota elementda border bo'lsa
• Ota element Block Formatting Context (BFC) yaratsa
• Horizontal margin bo'lsa (margin-left/right)

2. Normal flow degani nima?

🧠 Normal flow nima?

Normal flow — bu brauzerning default joylashtirish qoidasi.

Ya'ni:

Agar sen CSS bilan aralashmasang, brauzer elementlarni o'zi qanday joylashtiradi — mana shu normal flow.

📦 Normal flow'da elementlar qanday joylashadi?

1️⃣ Block elementlar

Masalan: div, p, section, article

👉 Qoidalar:

• Yangi qatordan boshlanadi
• Ota elementning butun enini egallaydi
• Vertikal ketma-ket joylashadi

<div>A</div>
<div>B</div>

Natija:

A
B

2️⃣ Inline elementlar

Masalan: span, a, strong

👉 Qoidalar:

• Yonma-yon joylashadi
• Faqat content joyini egallaydi
• Yangi qator ochmaydi

<span>A</span>
<span>B</span>

Natija:

A B

⚠️ Muhim farq (ko'p chalkashadi)

Normal flow = position: static holat.

Agar element:

• position: absolute
• position: fixed

bo'lsa → ❌ normal flow'dan chiqadi.

🧱 Normal flow'da margin qanday ishlaydi?

• Block elementlar orasida → vertical margin

• Inline elementlar orasida → horizontal joy

Margin collapsing:

• faqat normal flowda bo'ladi
• shuning uchun oldingi darslar shu yerga bog'langan

❓ "Normal flow"ni buzadigan narsalar

Agar yozsang:

.parent {
  display: flex;
}

yoki

.parent {
  display: grid;
}

👉 Endi:

• normal flow o'chadi
• yangi layout qoidasi ishga tushadi

Flex va Grid — bu normal flow o'rnini bosuvchi layout engine.

📍 Misol: Nega margin-top ishlamayotgandek tuyuladi?

.child {
  margin-top: 40px;
}

Agar:

• parent'da padding yo'q
• border yo'q
• normal flow bo'lsa

👉 Margin parent bilan collapse bo'ladi

🧠 Qachon normal flow'ni saqlash kerak?

• Oddiy matn sahifalari
• Blog postlar
• Article layout

Qachon buzish kerak?

• UI layout
• Card, navbar, sidebar
• App interfeyslar

📌 Xulosa

• Margin collapsing — faqat vertical marginlarda bo'ladi
• Eng katta margin yutib ketadi
• Normal flow — brauzerning default joylashtirish qoidasi
• Flex va Grid normal flow'ni buzadi
• Margin collapsing faqat normal flowda ishlaydi