CSS: spacing ​

.--p-md — マージンとパディングのユーティリティ — .--m<side>-<step> / .--margin-<side>-<step> と .--p<side>-<step> / .--padding-<side>-<step> のスペーシングスケール（辺 t/b/s/e/x/y または none、短縮形または完全な長名で表記 — 例えば --mb-sm と --margin-bottom-small は同じルールです；margin は auto も受け取ります）。任意のコンポーネントに単独で使用するかチェーンして使用可能です（例：class="instui-view --mb-sm"）。

Source: index.ts

使用法 ​

css
@import "@pantoken/components/utilities.css";

デモ ​

例 ​

html
<div class="--p-md --mt-lg">Padded box with a large top margin.</div>

修飾子 ​

修飾子説明
.--p-md全ての辺に中程度のパディングを適用します。
.--m*短い表記・旧来の長い表記・完全な長い表記に対応したマージンユーティリティ。
.--p*短い表記・旧来の長い表記・完全な長い表記に対応したパディングユーティリティ。

使用トークン ​

Token型値
--instui-component-shared-tokens-spacing-general-space-none<length>0rem
--instui-spacing-space-lg<length>1rem
--instui-spacing-space-md<length>0.75rem
--instui-spacing-space-sm<length>0.5rem
--instui-spacing-space-xl<length>1.5rem
--instui-spacing-space-xs<length>0.25rem
--instui-spacing-space2xl<length>2rem
--instui-spacing-space2xs<length>0.125rem