Pad 內距

設定元件本身的內距，部分元件僅套用於單一方向。

用法

<div sl-card sl-pad="lg">卡片</div>
<div sl-notice sl-pad="sm">通知</div>

原始碼

<div sl-card>卡片</div>

sl-pad-nonesmmdlg內距

- 表示不寫這個屬性，用預設值；元件標記欄位的 - 是寫裸屬性

卡片的三階內距：

原始碼

<div sl-card sl-pad="none" style="width: 9rem">卡片內容</div>
<div sl-card sl-pad="sm" style="width: 9rem">卡片內容</div>
<div sl-card sl-pad="md" style="width: 9rem">卡片內容</div>
<div sl-card sl-pad="lg" style="width: 9rem">卡片內容</div>

sl-notice 同樣支援，lg 適合多行的公告內容：

原始碼

<div sl-notice sl-tone="secondary" sl-pad="none">公告訊息</div>
<div sl-notice sl-tone="secondary" sl-pad="sm">公告訊息</div>
<div sl-notice sl-tone="secondary" sl-pad="md">公告訊息</div>
<div sl-notice sl-tone="secondary" sl-pad="lg">公告訊息</div>

選項

表中 px 值以根字級 16px 換算，級距本身以 rem 定義：

選項	內距
none	0
sm	12px
md	16px
lg	24px

未標示時各元件的取值不同，見下方適用元件。

適用元件

元件	未標示時	作用範圍
sl-card	md	四邊
sl-notice	sm	四邊
sl-bar	sm	僅上下
sl-container	md	僅左右