Spacing

Spacing scale, padding, margin, grid gap, dan section rhythm.

Tailwind Spacing Scale

Unit dasar = 4px (0.25rem). Setiap step Tailwind adalah kelipatan unit ini. Klik baris untuk menyalin nilai.

Step	rem	px	Contoh class
0	0	0px
0.5	0.125rem	2px
1	0.25rem	4px	gap-1
1.5	0.375rem	6px
2	0.5rem	8px	p-2, gap-2
2.5	0.625rem	10px
3	0.75rem	12px	p-3
3.5	0.875rem	14px
4	1rem	16px	p-4, gap-4
5	1.25rem	20px	p-5
6	1.5rem	24px	p-6, gap-6
7	1.75rem	28px
8	2rem	32px	p-8, gap-8
10	2.5rem	40px	p-10
12	3rem	48px	p-12
16	4rem	64px	p-16
20	5rem	80px	p-20
24	6rem	96px	p-24
32	8rem	128px	p-32
40	10rem	160px	p-40
48	12rem	192px	p-48
64	16rem	256px	p-64
96	24rem	384px	p-96

Token semantik dari token.css untuk layout, gutter, dan section rhythm. Nilai menggunakan clamp() — responsif tanpa media query.

--spacing-gutter clamp(1rem, 5vw, 4rem) Padding inline wrapper utama. Melebar sesuai viewport. 16px → 64px

--spacing-section-y clamp(3rem, 8vw, 6rem) Padding vertikal atas/bawah per section halaman. 48px → 96px

--spacing-section-gap clamp(2rem, 5vw, 4rem) Jarak vertikal antar section dalam satu halaman. 32px → 64px

--spacing-grid-gap clamp(1rem, 2vw, 1.5rem) Gap antar kolom dan baris pada grid komponen. 16px → 24px

--width-wrapper 1280px Max-width container utama konten halaman. 1280px

--width-prose 70ch Lebar optimal kolom teks untuk keterbacaan. ~700px

--width-narrow 860px Lebar untuk artikel, form, dan halaman pendek. 860px

Bagaimana spacing scale diterapkan pada komponen UI yang umum.

Padding Card — p-4 (16px)

Judul Card

Konten card dengan padding p-4 di semua sisi.

Grid Gap — gap-6 (24px)

Section Margin — mb-12 (48px)

Section A

48px

Section B

Form Stack — gap-3 (12px)

Nama

placeholder...

Geser slider untuk preview padding pada card secara real-time.

Padding

Padding saat ini — geser slider untuk melihat perubahan ruang dalam card.

Tag

Geser slider untuk preview gap antar elemen dalam flex/grid row.

Gap