CSS کا باکس ماڈل کیا ہے؟

Question

Accepted Answer

CSS میں ہر element ایک مستطیل **باکس** ہے جو چار تہوں سے بنا ہے، اندر سے باہر کی طرف: **content**، **padding**، **border**، اور **margin**۔ یہ سمجھنا کہ یہ کیسے ملتے ہیں، تمام layout کی بنیاد ہے۔

```text
┌─────────────── margin ───────────────┐  ← space OUTSIDE, between elements
│  ┌──────────── border ────────────┐  │
│  │  ┌───────── padding ────────┐  │  │  ← space INSIDE, around content
│  │  │       content            │  │  │  ← text/image (width × height)
│  │  └──────────────────────────┘  │  │
│  └─────────────────────────────────┘  │
└────────────────────────────────────────┘
```

```css
.box {
  width: 200px;      /* content width (in the default box model) */
  padding: 20px;     /* inner spacing — pushes content inward */
  border: 5px solid; /* the visible edge */
  margin: 10px;      /* outer spacing — separates from neighbors */
}
```

## کلاسیکی مسئلہ: کل چوڑائی

**ڈیفالٹ** `box-sizing: content-box` کے ساتھ، rendered چوڑائی آپ کے سیٹ کردہ `width` سے *زیادہ* ہوتی ہے، کیونکہ padding اور border اوپر سے شامل ہوتے ہیں:

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

یہ نئے سیکھنے والوں کو حیران کرتا ہے — آپ `width: 200px` سیٹ کرتے ہیں لیکن یہ 250px کو گھیرتا ہے۔ وہ حل جو سب استعمال کرتے ہیں:

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding بمقابلہ margin

- **padding** — border کے *اندر* کی جگہ؛ یہ element کا حصہ ہے (قابل کلک، background رنگ لیتا ہے)۔
- **margin** — border کے *باہر* کی جگہ؛ شفاف، اور ملحق vertical margins **سکڑ جاتے ہیں** (دونوں سے زیادہ touching margins جیتتے ہیں)۔

## اہمت

باکس ماڈل یہ طے کرتا ہے کہ elements واقعی کتنے بڑے ہیں اور وہ ایک دوسرے سے کتنی دوری پر ہیں۔

جاننا کہ ڈیفالٹ ماڈل `width` میں padding/border شامل کرتا ہے (اور کیوں `border-box` تقریباً عام حل ہے) سب سے عام layout-sizing الجھن سے بچاتا ہے۔