← ToolBox / 間距比例尺

📏 Spacing Scale Generator

📐 工作原理與說明

間距 s(n) = base × rⁿ（等比）或 base × n（線性，如 4/8/12/16）

基於模數化間距體系：以一個基數按固定比例或倍數派生整組間距，保證頁面留白節奏一致；輸出為 CSS 變數，用於設計規範與元件間距。

Generate a consistent spacing ladder from a base unit such as 4/8/16 multiples and copy it as CSS variables for design systems.

基礎間距 (px)

比例

層級數

預覽

📚 深度解析：間距比例尺

生成 4 倍數列

輸入：基 4、檔 8。處理：生成比例。輸出：--space-1…8 變數。

基值怎麼選？: 4/8 常見；與元件高度對齊更協調，按體系定。
負間距怎麼處理？: 間距用正 token；需要重疊時用 margin 負值，不要借間距 token 表達。
會儲存或上傳我的內容嗎？: 結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。

⚠️ 使用說明與注意事項

📖關於「間距比例尺」 ▼

間距比例尺是一款設計創意領域的線上工具。設計創意工具，視覺化操作，一鍵生成 CSS 程式碼。