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).
