Apa iku CSS box model?

Question

Accepted Answer

Saben elemen ing CSS iku kotak persegi panjang sing dumadi saka patang lapis, saka njerone metu: **content**, **padding**, **border**, lan **margin**. Ngerti bab cara padha obah-obahan iku dhasar saka kabeh 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 */
}
```

## Gotcha klasik: lebar total

Karo **default** `box-sizing: content-box`, lebar sing dirender luwih *gede* tinimbang `width` sing ditetapake, amarga padding lan border ditambahake ing ndhuwur:

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

Ki ngene nggegerake pemula — ditetapake `width: 200px` nanging njumput 250px. Cara perbaiki sing digunakake kabeh:

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

## padding vs margin

- **padding** — ruang *jero* border; bagian saka elemen (bisa diklik, njupuk warna latar belakang).
- **margin** — ruang *luar* border; transparan, lan margin vertikal sing cedhak **ambruk** (sing luwih gedhe saka loro margin sing ngenakan menang).

## Mengapa iki penting

Box model ngendalani carane gedhe elemen lan carane padha anteng.

Ngerti manawa model default nambahake padding/border ing `width` (lan ngapa `border-box` iku jawaban universal meh kabeh) nyegah kebingungan sizing layout sing paling umum.