Chapter 3 — Padding, Margin va Gap

---

3.1 Spacing Shkalasi

Simple Explanation

Tailwind spacing tizimi 4px (0.25rem) ga asoslangan qadam bilan ishlaydi: 1=4px, 2=8px, 4=16px, 8=32px.

Why Does It Exist?

Bu barcha bo'shliqlarning bir-biriga proportsional bo'lishini ta'minlaydi — tasodifiy piksellar (13px, 17px) o'rniga izchil shkala.

Example

index.html
HTMLNusxalash
01<div class="p-6 m-4 bg-gray-100">Padding va margin</div>

3.2 Padding va Margin farqi

Mental Model

🧠 Padding — content bilan border orasidagi ICHKI bo'shliq. Margin — border bilan boshqa elementlar orasidagi TASHQI bo'shliq.

⚠️ Common Mistake
Margin va paddingni farqlamaslik — ayniqsa fon rangi bilan ishlaganda, padding fon ichida ko'rinadi, margin esa ko'rinmaydi.

3.3 Gap va Space-Between

Example

index.html
HTMLNusxalash
01<div class="flex gap-4">
02  <div>Item 1</div>
03  <div>Item 2</div>
04</div>

Real-world Usage

gap — flex/grid ichidagi elementlar orasidagi bo'shliq uchun zamonaviy standart, space-x/y dan ko'ra tavsiya etiladi.

3.4 Width va Height

Example

index.html
HTMLNusxalash
01<div class="w-full max-w-lg mx-auto p-6">Markazlashtirilgan konteyner</div>

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: p-6 max-w-md mx-auto bilan markazlashtirilgan konteyner yarating.

🟡 Exercise 2 — Medium

Task: 3 ta kartadan iborat ro'yxat yarating, orasida gap-6, butun blok max-w-4xl mx-auto.

🔴 Exercise 3 — Hard

Task: Profil kartasi yarating: dumaloq avatar, ism, lavozim — space-y-2 bilan vertikal joylashtirilgan.

---

🐛 Debugging Challenge

index.html
HTMLNusxalash
01<div class="flex space-x-4">
02  <div class="w-1/2">Chap</div>
03  <div class="w-1/2">O'ng</div>
04</div>

Your Task: Nega ikkala div kutilganidan tor ko'rinadi va ba'zan pastki qatorga tushib qoladi?

<details> <summary>Solution</summary> `space-x-4` ikkala elementga ham margin qo'shadi (birinchisidan tashqari), shu sabab ularning umumiy kengligi 100%dan oshib ketadi. Yechim: `space-x-4` o'rniga `gap-4` ishlatish. </details>

---

📌 Chapter Summary

Spacing shkalasi 4px qadam bilan ishlaydi. Padding — ichki, margin — tashqi bo'shliq. gap zamonaviy va tavsiya etiladigan yechim, space-x/ydan ko'ra.

🎯 Key Takeaways

• Har doim standart shkaladan foydalaning, tasodifiy piksel emas
• gap flex/grid uchun space-x/ydan yaxshiroq
• max-w-* + mx-auto — markazlashtirilgan konteynerlarning standart formulasi

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01Padding:  p-*, px-*, py-*, pt-*, pr-*, pb-*, pl-*
02Margin:   m-*, mx-*, my-*, mx-auto
03Gap:      gap-*, gap-x-*, gap-y-*
04Sizing:   w-*, h-*, max-w-*, min-w-*

---