Cili është CSS box model?

Question

Accepted Answer

Çdo element në CSS është një kuti drejtkëndore **box** e bërë nga katër shtresa, nga brenda jashtë: **content**, **padding**, **border** dhe **margin**. Të kuptosh se si kombinohen është themeli i të gjitha paraqitjeve.

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

## Kurthe klasike: gjerësia totale

Me **parazgjedhjen** `box-sizing: content-box`, gjerësia e paraqitur është *më e madhe* se `width` që vendosni, sepse padding dhe border shtohen në krye:

```text
Total width = 200 (content) + 2×20 (padding) + 2×5 (border) = 250px
```

Kjo befason fillestarët — vendosni `width: 200px` por ajo zë 250px. Zgjidhja që përdorin të gjithë:

```css
* { box-sizing: border-box; } /* now width INCLUDES padding + border → 200px total */
```

## padding vs margin

- **padding** — hapësirë *brenda* kufirit; është pjesë e elementit (i klikueshëm, merr ngjyrën e sfondit).
- **margin** — hapësirë *jashtë* kufirit; transparent, dhe margjina vertikale të afërta **shemben** (më e madhe nga dy margjina të prekueshme fiton).

## Pse ka rëndësi

Box model përcakton se sa të mëdhenj janë në të vërtetë elementet dhe si janë përjashtuar.

Të dish se modeli parazgjedhje shton padding/border në `width` (dhe pse `border-box` është rregullimi pothuajse universal) pengon konfuzionin më të zakonshëm të madhësisë së paraqitjes.