Apakah model kotak CSS?

Question

Accepted Answer

Setiap elemen dalam CSS ialah kotak segi empat yang terdiri daripada empat lapisan, dari dalam ke luar: **content**, **padding**, **border**, dan **margin**. Memahami bagaimana ia bergabung adalah asas semua tata letak.

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

## Perangkap klasik: lebar jumlah

Dengan `box-sizing: content-box` **lalai**, lebar yang dipaparkan adalah *lebih besar* daripada `width` yang anda tetapkan, kerana padding dan border ditambahkan di atas:

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

Ini mengejutkan pemula — anda menetapkan `width: 200px` tetapi ia menempati 250px. Pembaikan yang semua orang gunakan:

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

## padding vs margin

- **padding** — ruang *di dalam* sempadan; ia adalah sebahagian daripada elemen (boleh diklik, mengambil warna latar belakang).
- **margin** — ruang *di luar* sempadan; telus, dan margin menegak yang bersebelahan **runtuh** (yang lebih besar daripada dua margin yang bersentuhan menang).

## Mengapa ia penting

Model kotak mengawal betapa besarnya elemen sebenarnya dan bagaimana ia menjarakkan diri antara satu sama lain.

Mengetahui bahawa model lalai menambah padding/border kepada `width` (dan mengapa `border-box` adalah penyelesaian hampir universal) menghalang kekeliruan saiz tata letak yang paling biasa.