CSS બોક્સ મોડેલ શું છે?

Question

Accepted Answer

CSS માં દરેક તત્વ એક લંબચોરસ **box** છે જે ચાર સ્તરોથી બનેલો છે, અંદરથી બહાર: **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` કરતાં *વધારે* છે, કારણ કે પેડિંગ અને બોર્ડર ઉપર ઉમેરવામાં આવે છે:

```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** — બોર્ડર *બહાર* જગ્યા; પારદર્શક, અને સંલગ્ન ઊર્ધ્વ માર્જિન **તૂટે છે** (બે સ્પર્શતા માર્જિનમાંથી મોટો જીતે છે).

## શા માટે આ મહત્વપૂર્ણ છે

બોક્સ મોડેલ નિયંત્રણ કરે છે કે તત્વો વાસ્તવમાં કેટલો મોટો છે અને તેઓ કેવી રીતે અલગ થાય છે.

જાણવું કે ડિફોલ્ટ મોડેલ પેડિંગ/બોર્ડર `width` માં ઉમેરે છે (અને શા માટે `border-box` લગભગ સાર્વત્રિક સુધાર છે) તમામ સામાન્ય લેઆઉટ-સાઇજીંગ મૂંઝવણને અટકાવે છે.