Co to jest model pudełka CSS?

Question

Accepted Answer

Każdy element w CSS jest prostokątnym **pudełkiem** wykonanym z czterech warstw, od wewnątrz do zewnątrz: **content**, **padding**, **border** i **margin**. Zrozumienie, jak się one łączą, jest podstawą całego układu.

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

## Klasyczne wpadki: całkowita szerokość

Z **domyślnym** `box-sizing: content-box`, wyrenderowana szerokość jest *większa* niż `width`, którą ustawiłeś, ponieważ padding i border są dodawane na górze:

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

To zaskakuje początkujących — ustawiasz `width: 200px`, ale zajmuje 250px. Naprawa, którą wszyscy używają:

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

## padding vs margin

- **padding** — przestrzeń *wewnątrz* obramowania; jest częścią elementu (klikalny, przyjmuje kolor tła).
- **margin** — przestrzeń *poza* obramowaniem; przezroczysta i sąsiednie marginesy pionowe **zwierają się** (większy z dwóch przylegających marginów wygrywa).

## Dlaczego to ważne

Model pudełka reguluje to, jak duże są faktycznie elementy i jak się od siebie odstępiają.

Wiedza, że model domyślny dodaje padding/border do `width` (i dlaczego `border-box` jest prawie uniwersalnym rozwiązaniem) zapobiega najczęstszemu zamieszaniu związanemu z rozmiarem układu.