Chapter 3 — Box Model Chuqur O'rganish

---

3.1 content-box vs border-box

Example

styles.css
CSSNusxalash
01.content-box { box-sizing: content-box; width: 200px; padding: 20px; border: 5px solid black; }
02/* Haqiqiy kenglik: 200+40+10 = 250px */
03 
04.border-box { box-sizing: border-box; width: 200px; padding: 20px; border: 5px solid black; }
05/* Haqiqiy kenglik: 200px (padding va border shu ichiga kiradi) */

3.2 Margin Collapse

Simple Explanation

Ikkita vertikal margin (masalan bir elementning margin-bottom va keyingi elementning margin-top) ba'zan QO'SHILMAY, balki ULARNING KATTASI qo'llanadi — bu "margin collapse" deyiladi.

Example

styles.css
CSSNusxalash
01.box1 { margin-bottom: 20px; }
02.box2 { margin-top: 30px; }
03/* Ular orasidagi masofa: 20+30=50px EMAS, balki max(20,30)=30px */

⚠️ Common Mistake
Margin collapse hodisasini bilmasdan, ikkita element orasidagi masofani noto'g'ri hisoblash.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Ikkita <div> yarating: biriga content-box, ikkinchisiga border-box bilan bir xil width/padding/border bering, DevTools'da haqiqiy o'lchamlarini solishtiring.

🟡 Exercise 2 — Medium

Task: Ikkita paragraf orasida margin collapse hodisasini ko'rsatadigan misol yarating, keyin uni flex konteynerga joylashtirib, farqni kuzating.

🔴 Exercise 3 — Hard

Task: Butun sahifa uchun * { box-sizing: border-box; } reset qo'shing va bu qanday ta'sir qilishini (masalan formalar, kartalar o'lchamida) tekshiring.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.card { width: 300px; padding: 24px; border: 2px solid gray; }

Your Task: Karta konteyneriga sig'dirmoqchi bo'lgan 300pxli karta nega haqiqatda 352px bo'lib chiqmoqda?

<details> <summary>Solution</summary> Standart `box-sizing: content-box` bilan padding (24*2=48px) va border (2*2=4px) width'ga QO'SHILADI: 300+48+4=352px. Yechim: `box-sizing: border-box` qo'shish. </details>

---

📌 Chapter Summary

border-box — width/height'ga padding va border'ni ichiga oladi, content-box (default) esa ularni qo'shadi. Margin collapse — ikkita vertikal margin orasida kattasi qo'llanadigan hodisa.

🎯 Key Takeaways

• Zamonaviy loyihalarda deyarli har doim box-sizing: border-box ishlatiladi
• Margin collapse faqat vertikal, block-level elementlarda yuz beradi
• Flexbox/Grid ichidagi bola elementlarda margin collapse bo'lmaydi

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01* { box-sizing: border-box; }
02/* Margin collapse: max(margin1, margin2), summasi emas */

---