CSS: spacing ​

.--p-md — 여백(margin) 및 패딩(padding) 유틸리티 — .--m<side>-<step> / .--margin-<side>-<step> 및 .--p<side>-<step> / .--padding-<side>-<step> 간격 스케일(측면 t/b/s/e/x/y 또는 없음, 짧은 표기 또는 전체 긴 표기 모두 사용 가능 — 예: --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