Borders vs Spacing — Kapan Pakai Apa?

Ada 2 cara memisahkan elemen: garis (border/divider) dan ruang kosong (spacing). Mengetahui kapan pakai mana membuat desain lebih clean.

Spacing First, Border Last

Prinsip utama: coba pisahkan dengan spacing/whitespace dulu. Jika masih tidak cukup jelas, baru gunakan border.

/* ❌ Terlalu banyak border */
.item { border-bottom: 1px solid #000; padding: 8px; }

/* ✅ Spacing cukup sebagai pemisah */
.item { padding: 16px 0; }

/* ✅ Border halus ketika memang perlu */
.item { padding: 16px 0; border-bottom: 1px solid #F3F4F6; }

Jenis Divider

1. Full-width divider — memisahkan section besar
2. Inset divider — tidak sampai tepi (indented), lebih halus
3. Middle divider — hanya di tengah, sering di navigation

Warna Border

Jangan gunakan border hitam penuh — terlalu harsh:

/* ❌ Terlalu kontras */
border: 1px solid #000000;

/* ✅ Subtle */
border: 1px solid #E5E7EB;  /* Light mode */
border: 1px solid #374151;  /* Dark mode */

Kapan Menggunakan Border

1. Input fields — user harus tahu batas area input
2. Table cells — memisahkan data
3. Card boundaries — jika background card sama dengan page background
4. Navigation sections — memisahkan group menu

Kapan TIDAK Menggunakan Border

1. Antar cards — spacing sudah cukup jika card punya background berbeda
2. Antar section — gunakan whitespace besar
3. Semua list item — pertimbangkan spacing saja

Apple dan Stripe sangat minimal dengan border — mereka lebih mengandalkan spacing dan subtle background differences.