CSS बक्स मडल भनेको के हो?

Question

Accepted Answer

CSS मा हरेक एलिमेन्ट एक आयताकार **बक्स** हो जो चार तहबाट बनेको छ, भित्र देखि बाहिरसम्म: **content**, **padding**, **border**, र **margin**। यহरु कसरी एकसाथ काम गर्छन भन्ने कुरा बुझ्नु सबै layout को आधार हो।n
```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` सँग, rendered width *ठूलो* हुन्छ जुन तपाईले सेट गरेको `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 *भित्र* को स्पेस; यो एलिमेन्टको हिस्सा हो (क्लिक गर्न सकिन्छ, background color लिन्छ)।
- **margin** — border *बाहिर* को स्पेस; पारदर्शी, र आसन्न vertical margins **collapse** हुन्छन् (दुई छोएको margins को ठूलो जित्छ)।

## किन महत्त्वपूर्ण छ

बक्स मडल नियन्त्रण गर्छ कि एलिमेन्टहरु साँच्चै कति ठूला छन् र यहरु कसरी अलग अलग हुन्छन्।

ज्ञान गर्नु कि default मडल padding/border लाई `width` मा जोड्छ (र किन `border-box` लगभग सार्वभौमिक समाधान हो) सबैभन्दा साधारण layout-sizing भ्रमलाई रोक्छ।