Skip to content

CSS: spacing ​

.--p-md — 外边距和内边距工具 — .--m<side>-<step> / .--margin-<side>-<step> 和 .--p<side>-<step> / .--padding-<side>-<step> 在间距刻度上(边 t/b/s/e/x/y 或 无,支持短写或完整长写 — 例如 --mb-sm 和 --margin-bottom-small 是相同规则;外边距还接受 auto)。可单独使用或链式附加到任意组件(例如 class="instui-view --mb-sm")。

Source: index.ts

用法 ​

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

演示 ​

示例 ​

html
<div class="--p-md --mt-lg">带有内边距且顶部外边距较大的盒子。</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