Ce este modelul de cutie CSS?

Question

Accepted Answer

Fiecare element în CSS este o **cutie** dreptunghiulară făcută din patru straturi, din interior spre exterior: **content**, **padding**, **border** și **margin**. Înțelegerea modului în care se combină este baza tuturor aspectelor de layout.

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

## Capcana clasică: lățimea totală

Cu **implicit** `box-sizing: content-box`, lățimea redată este *mai mare* decât `width` pe care o setezi, deoarece padding și border sunt adăugate deasupra:

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

Aceasta surprinde începătorii — setezi `width: 200px` dar ocupă 250px. Corecția pe care o folosesc toți:

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

## padding versus margin

- **padding** — spațiu *în interiorul* marginii; face parte din element (se poate face clic, primește culoare de fundal).
- **margin** — spațiu *în afara* marginii; transparent, și marginile verticale adiacente **se prăbușesc** (cea mai mare dintre două margini care se ating câștigă).

## De ce este important

Modelul de cutie determină cât de mari sunt de fapt elementele și cum se distanțează.

Știind că modelul implicit adaugă padding/border la `width` (și de ce `border-box` este soluția aproape universală) previne confuzia de dimensionare layout cea mai frecventă.