Co je model CSS boxu?

Question

Accepted Answer

Každý element v CSS je obdélníkový **box** tvořený čtyřmi vrstvami, zevnitř ven: **content**, **padding**, **border** a **margin**. Pochopení toho, jak se kombinují, je základem veškerého rozložení.

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

## Klasický problém: celková šířka

S **výchozím** `box-sizing: content-box` je renderovaná šířka *větší* než `width`, kterou jste nastavili, protože padding a border se přidávají navrch:

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

To překvapuje začátečníky — nastavíte `width: 200px`, ale zabírá 250px. Řešení, které všichni používají:

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

## padding vs margin

- **padding** — prostor *uvnitř* okraje; je součástí prvku (lze na něj kliknout, vezme barvu pozadí).
- **margin** — prostor *vně* okraje; průhledný a sousedící vertikální okraje se **sbalují** (větší ze dvou dotýkajících se okrajů vyhrává).

## Proč je to důležité

Model boxu určuje, jak velké prvky skutečně jsou a jak se od sebe oddělují.

Vědomí toho, že výchozí model přidává padding/border k `width` (a proč je `border-box` téměř univerzálním řešením) zabraňuje nejčastějšímu zmatku v určování velikosti rozložení.