Space 間距

幫一排(或一列)子元素自動加上一致的間距,不必逐個手動加 margin。使用 Element Plus 的 el-space。

設計準則

• 一組並列的小元件(標籤群、按鈕群、連結群)用 el-space 統一間距,取代手刻 margin
• 間距沿用 4px 網格:size 用 small(8)/default(12)/large(16),或直接給數字
• 項目較多可能撐破容器時,加 wrap 讓它自動換行
• 需要在項目之間放分隔線或符號時,用 spacer
• 大版型的分欄請用 Layout 佈局;Space 是給「小元件之間」的間距
• 注意:相鄰的 el-button 已內建 12px 間距,單純排按鈕不一定要包 Space

基本用法

自動幫子元素加上一致間距;wrap 讓過多項目換行:

loading

垂直排列

direction="vertical" 讓子元素垂直排列:

loading

間距大小

size 可用預設檔位 small / default / large:

loading

自訂間距

size 也可傳數字,做無段調整:

loading

分隔符

spacer 在項目之間插入分隔——可以是文字,也可以是元件(如垂直分割線):

loading

對齊方式

alignment 對應 CSS align-items,控制不同高度子元素的垂直對齊:

loading

填滿容器

fill 讓子元素自動撐滿容器寬度:

loading

Do / Don't

✅ Do	❌ Don't
標籤群 / 按鈕群用 Space 統一間距	每個元素各自加 margin
項目多時加 wrap	硬擠成一列撐破容器
size 沿用 4px 網格檔位	填入不成比例的奇數間距
大版型分欄用 Layout	用 Space 兜整頁版型

給工程師

• 常用 props:direction(horizontal / vertical)、size(small / default / large 或數字)、wrap(自動換行)、spacer(分隔符,字串或 VNode)、alignment(對應 align-items)、fill(撐滿容器)、fill-ratio(填充比例,預設 100)
• spacer 傳 VNode 範例:h(ElDivider, { direction: 'vertical' })
• 完整 API 見 Element Plus Space 文件。本站規範優先於 EP 文件中的視覺建議。