CSS ਬਾਕਸ ਮਾਡਲ ਕੀ ਹੈ?

Question

Accepted Answer

CSS ਵਿੱਚ ਹਰੇਕ ਐਲੀਮੈਂਟ ਇੱਕ ਆਇਤਾਕਾਰ **ਬਾਕਸ** ਹੈ ਜੋ ਚਾਰ ਪਰਤਾਂ ਤੋਂ ਬਣਿਆ ਹੈ, ਅੰਦਰ ਤੋਂ ਬਾਹਰ: **content**, **padding**, **border**, ਅਤੇ **margin**। ਉਹਨਾਂ ਨੂੰ ਕਿਵੇਂ ਜੋੜਿਆ ਜਾਂਦਾ ਹੈ ਇਹ ਸਮਝਣਾ ਸਭ ਲੇਆਉਟ ਦੀ ਬੁਨਿਆਦ ਹੈ।

```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 */
}
```

## ਕਲਾਸਿਕ ਮਸਲਾ: ਕੁਲ ਚੌੜਾਈ

**default** `box-sizing: content-box` ਦੇ ਨਾਲ, ਪ੍ਰਸਤੁਤ ਚੌੜਾਈ *ਵੱਡੀ* ਹੁੰਦੀ ਹੈ ਜਿਸ `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 *ਅੰਦਰ* ਥਾਂ; ਇਹ ਐਲੀਮੈਂਟ ਦਾ ਹਿੱਸਾ ਹੈ (ਕਲਿਕ ਕਰਨ ਯੋਗ, ਬੈਕਗ੍ਰਾਉਂਡ ਰੰਗ ਲੈਂਦਾ ਹੈ)।
- **margin** — border *ਬਾਹਰ* ਥਾਂ; ਸਪਸ਼ਟ, ਅਤੇ ਬੇ ਲਗਦਾ ਹੋਇਆ ਲੰਬਵਤ margins **ਟੁੱਟ** ਜਾਂਦੇ ਹਨ (ਦੋ ਛੂਣ ਵਾਲੇ margins ਵਿੱਚੋਂ ਵੱਡਾ ਜਿੱਤਦਾ ਹੈ)।

## ਇਹ ਮਾਈਨੇ ਲਈ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਬਾਕਸ ਮਾਡਲ ਨਿਯੰਤ੍ਰਿਤ ਕਰਦਾ ਹੈ ਕਿ ਐਲੀਮੈਂਟਸ ਅਸਲ ਵਿੱਚ ਕਿੰਨੇ ਵੱਡੇ ਹਨ ਅਤੇ ਉਹ ਕਿਵੇਂ ਵਖੋ ਵਖ ਹਨ।

ਇਹ ਜਾਣਨਾ ਕਿ ਡਿਫੌਲਟ ਮਾਡਲ padding/border ਨੂੰ `width` ਵਿੱਚ ਜੋੜਦਾ ਹੈ (ਅਤੇ ਕਿਉਂ `border-box` ਲਗਭਗ ਵਿਆਪਕ ਸੁਧਾਰ ਹੈ) ਸਭ ਤੋਂ ਆਮ layout-sizing ਷ੰਕਾ ਨੂੰ ਰੋਕਦਾ ਹੈ।