CSS box model అంటే ఏమిటి?

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

## క్లాసిక్ ఎర్ర: మొత్తం వెడల్పు

**డిఫాల్ట్** `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 vs margin

- **padding** — సరిహద్దు *లోపల* స్థలం; ఇది మూలకం యొక్క భాగం (క్లిక్‌చేయగల, నేపథ్య రంగును తీసుకుంటుంది).
- **margin** — సరిహద్దు *బయటికి* స్థలం; పారదర్శకమైన, మరియు ప్రక్కనిలున్న నిలువు మార్జిన్‌లు **కూలిపోతాయి** (రెండు స్పర్శ మార్జిన్‌లలో పెద్దది గెలుస్తుంది).

## ఇది ఎందుకు ముఖ్యమైనది

Box model మూలకాలు నిజానికి ఎంత పెద్దవి మరియు అవి ఎలా దూరం ఉన్నాయో నిర్ణయిస్తుంది.

డిఫాల్ట్ మోడల్ padding/border ను `width` కు జోడిస్తుందని (మరియు `border-box` ఎందుకు దాదాపు సార్వత్రిక సమస్య ఎందుకు) తెలుసుకోవడం చాలా సాధారణమైన లేআউట్-సైజింగ్ గందరగోళాన్ని నిరోధిస్తుంది.