Berpikir dalam Kotak

Semua yang kamu lihat di layar adalah kotak (box). Button, card, header, sidebar — semuanya kotak. Memahami box model dari perspektif UI design membantu kamu membuat layout yang rapi dan terstruktur.

Box Model Refresher

Urutan dari dalam ke luar: content → padding → border → margin. Background color mewarnai area content + padding, tidak termasuk margin.

Selalu Gunakan border-box

*, *::before, *::after {
  box-sizing: border-box;
}

Dengan border-box, width: 300px berarti total lebar elemen adalah 300px (termasuk padding dan border). Ini membuat perhitungan layout jauh lebih mudah.

Padding vs Margin — Kapan Pakai Apa?

Padding = ruang di dalam elemen:

• Background color mencakup area padding
• Gunakan untuk memberi ruang antara konten dan tepi elemen
• Contoh: padding di dalam button, card, input

Margin = ruang di luar elemen:

• Tidak memiliki background
• Gunakan untuk memberi jarak antar elemen
• Contoh: jarak antar section, jarak antar card

Spacing System

Gunakan kelipatan yang konsisten untuk padding dan margin:

4px — micro (gap antar icon dan label)
8px — tight (padding dalam badge/tag)
12px — small
16px — base (padding default)
24px — medium
32px — large
48px — xlarge (antar section)
64px — xxlarge (antar section besar)

Apple dan Airbnb sangat konsisten dengan spacing system — setiap jarak adalah kelipatan dari base unit (biasanya 4px atau 8px).