CSS: spacing ​

.--p-md — utiliti margin dan padding — .--m<side>-<step> / .--margin-<side>-<step> dan .--p<side>-<step> / .--padding-<side>-<step> pada skala jarak (sisi t/b/s/e/x/y atau tiada, dieja pendek atau panjang sepenuhnya — contohnya --mb-sm dan --margin-bottom-small adalah peraturan yang sama; margin juga menerima auto). Boleh digunakan sendiri atau dirangkai pada mana-mana komponen (contohnya class="instui-view --mb-sm").

Source: index.ts

Penggunaan ​

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

Demo ​

Contoh ​

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

Pemodifikasi ​

PemodifikasiPenerangan
.--p-mdMenerapkan padding sederhana pada semua sisi.
.--m*Utiliti margin merangkumi ejaan pendek, ejaan 'legacy-long', dan ejaan panjang sepenuhnya.
.--p*Utiliti padding merangkumi ejaan pendek, ejaan 'legacy-long', dan ejaan panjang sepenuhnya.

Token digunakan ​

TokenJenisNilai
--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