版面配置設定
寬度
高度
外距
內距
圖示位置
圖層順序
可能與實際介面略有差異。
寬度
寬度
Use Width
寬度
單位
px
Use Min Width
Use Max Width
可能與實際介面略有差異。
重點：
設定按鈕寬度。
影響：
文字長短不同時，可維持版面穩定。
調整建議：
先定義最小寬度，再微調寬度與最大寬度。
設定項目
使用寬度寬度（px / % / vw / vh / fit-content）使用最小寬度/最小寬度使用最大寬度/最大寬度響應式
註解：
fit-content會依文字長度自動調整寬度，%會以父層寬度為基準。
高度
高度
Use Height
高度
單位
px
Use Min Height
Use Max Height
可能與實際介面略有差異。
重點：
設定按鈕高度。
影響：
直接影響視覺密度與可點擊性。
調整建議：
以最小高度為基準，避免高度過度固定。
設定項目
使用高度高度（px / % / vw / vh）使用最小高度/最小高度使用最大高度/最大高度響應式
註解：
手機端建議最小高度 44px，以確保觸控操作性。
外距
外距
使用個別設定
外距
0
單位
px
可能與實際介面略有差異。
重點：
控制按鈕外部間距。
影響：
改善區塊之間的節奏與群組關係。
調整建議：
先定義頁面垂直間距規則，再套用到各按鈕。
設定項目
使用個別設定Margin（整體 / 上右下左）- 單位（px / % / vw / vh / auto）
響應式
註解：
auto常用於置中，若無預期效果請先檢查父層寬度設定。
內距
內距
使用個別設定
內距
0
單位
px
可能與實際介面略有差異。
重點：
控制按鈕內部留白。
影響：
直接影響文字可讀性與觸控區大小。
調整建議：
手機端可適度增加垂直內距。
設定項目
使用個別設定Padding（整體 / 上右下左）- 單位（px / % / vw / vh）
響應式
註解：
內距會影響可點擊面積，手機端建議優先保留垂直空間。
位置
圖示位置
位置類型
relative
上
auto
右
auto
下
auto
左
auto
Z-Index
auto
可能與實際介面略有差異。
重點：
控制按鈕定位方式與偏移。
影響：
設定不當可能造成版面錯位。
調整建議：
先以relative為主，必要時再使用absolute。
設定項目
位置 Type上 / 右 / 下 / 左- 單位（px / % / vw / vh）
響應式
註解：
使用absolute時，會以最近的定位父層作為基準。
圖層順序
圖層順序
內容
20
縮圖
10
色帶
5
背景
0
可能與實際介面略有差異。
重點：
設定各圖層前後關係。
影響：
可避免文字被縮圖、裝飾帶或背景遮住。
調整建議：
先固定Content在最上層，再排列裝飾層。
設定項目
z-index響應式
註解：
若文字被遮住，先檢查Content層是否高於裝飾層。