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` से *बड़ी* है, क्योंकि 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 *के बाहर* की जगह; पारदर्शी, और सटीक vertical margins **समाप्त हो जाते हैं** (दो टचिंग margins में से बड़ा जीतता है)।

## यह क्यों महत्वपूर्ण है

बॉक्स मॉडल नियंत्रित करता है कि तत्व वास्तव में कितने बड़े हैं और वे एक दूसरे से कैसे दूर हैं।

यह जानना कि डिफ़ॉल्ट मॉडल padding/border को `width` में जोड़ता है (और क्यों `border-box` लगभग सार्वभौमिक सुधार है) सबसे आम लेआउट-साइजिंग भ्रम को रोकता है।