間距比例尺 使用指南

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

核心功能

• 按基數與比例生成等比間距階梯（如 4、5、6.3、7.8…px）
• 層級數可調（5–15 級），同步輸出 CSS 變數
• 以條形長度直觀對比各檔間距的相對大小
• 純本地計算，不上傳任何輸入

適用場景

• 統一元件間距。
• 設計系統 token。
• 柵格留白。

使用步驟

1. 填寫基礎間距（常用 4 或 8）
2. 設定比例（如 1.25）
3. 調整層級數確定階梯長度
4. 檢視各檔數值與條狀對比
5. 複製生成的 CSS 變數粘到專案 :root

實用技巧

• 間距 token 建議只取整數或 0.5 的倍數，否則寫進 CSS 後難以對齊畫素
• 基數與控制組件高度對齊（如按鈕 40px 用 8 的倍數）整體更協調
• 需要重疊或負外邊距時直接寫負值，不要借間距 token 表達負號
• 階梯比例不宜過大，超過 1.5 時相鄰檔位跨度會明顯失衡

常見問題

基值怎麼選？

4/8 常見；與元件高度對齊更協調，按體系定。

負間距怎麼處理？

間距用正 token；需要重疊時用 margin 負值，不要借間距 token 表達。

會儲存或上傳我的內容嗎？

結果以瀏覽器即時計算為準，純前端本地處理、資料不上傳；生成的樣式與程式碼僅作快速產出參考，正式專案請以設計系統、規範與瀏覽器實測為準。