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` ஏன் ஏறக்குறைய பொதுமான தீர்வு என்பதையும்) தெரிந்துகொள்வது, மிகவும் பொதுவான கிளையண்ட் அளவு குழப்பத்தை தடுக்கிறது.