Mi a CSS box model?

Question

Mi a CSS box model?

Accepted Answer

A CSS-ben minden elem egy téglalap alakú **box**, amely négy rétegből áll, belülről kifelé: **content**, **padding**, **border** és **margin**. Az, hogy hogyan kombinálódnak, a teljes elrendezés alapja.

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

## A klasszikus csapda: teljes szélesség

A **default** `box-sizing: content-box` esetén a megjelenített szélesség *nagyobb*, mint a megadott `width`, mivel a padding és border hozzáadódik:

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

Ez meglepetést okoz a kezdőknek — beállítottál `width: 200px` értéket, de 250px-et foglal el. A megoldás, amit mindenki használ:

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

## padding kontra margin

- **padding** — hely a border *belül*; az elem része (kattintható, háttérszínnel rendelkezik).
- **margin** — hely a border *kívül*; átlátszó, és a szomszédos függőleges margók **összecsukódnak** (a nagyobb nyer két érintkező margin közül).

## Miért fontos

A box model szabályozza, hogy az elemek valójában mekkora és hogyan helyezkednek el egymáshoz képest.

Annak tudása, hogy az alapértelmezett modell padding/border-t ad a `width`-hez (és miért `border-box` a szinte univerzális megoldás) megelőzi a leggyakoribb elrendezés-méretezési zavart.