スペーシング計算

デザインシステムのスペーシングスケール計算。Tailwind/Material Design/Bootstrap対応

設定

ベースサイズ (px)

4px8px

プリセット

Tailwind CSSMaterial DesignBootstrapカスタム

スペーシングテーブル

値	px	rem	em	Tailwind
0px	0	0	0	p-0
1px	1	0.0625	0.0625	p-px
2px	2	0.125	0.125	p-0.5
4px	4	0.25	0.25	p-1
8px	8	0.5	0.5	p-2
12px	12	0.75	0.75	p-3
16px	16	1	1	p-4
20px	20	1.25	1.25	p-5
24px	24	1.5	1.5	p-6
32px	32	2	2	p-8
40px	40	2.5	2.5	p-10
48px	48	3	3	p-12
64px	64	4	4	p-16
80px	80	5	5	p-20
96px	96	6	6	p-24

ビジュアルプレビュー

1px

2px

4px

8px

12px

16px

20px

24px

32px

40px

48px

64px

80px

96px

CSS変数

:root {
  --space-1: 1px;
  --space-2: 2px;
  --space-3: 4px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 32px;
  --space-10: 40px;
  --space-11: 48px;
  --space-12: 64px;
  --space-13: 80px;
  --space-14: 96px;
}