CSS: spacing
.--p-md — Margin és padding segédosztályok — .--m<side>-<step> / .--margin-<side>-<step> és .--p<side>-<step> / .--padding-<side>-<step> a térközskálán (oldalak: t/b/s/e/x/y vagy egy sem, röviden vagy teljesen kiírva — például a(z) --mb-sm és a(z) --margin-bottom-small ugyanaz a szabály; a margin a(z) auto értéket is elfogadja). Használható önállóan vagy bármely komponenshez láncolva (például class="instui-view --mb-sm").
Forrás: index.ts
Használat
css
@import "@pantoken/components/utilities.css";Demó
Példák
html
<div class="--p-md --mt-lg">Padded box with a large top margin.</div>Módosítók
| Módosító | Leírás |
|---|---|
.--p-md | Közepes belső margót alkalmaz minden oldalon. |
.--m* | Külső margó segédosztályok rövid, örökölt hosszú és teljesen hosszú írásmódokhoz. |
.--p* | Belső margó segédosztályok rövid, örökölt hosszú és teljesen hosszú írásmódokhoz. |
Felhasznált tokenek
| Token | Típus | Érték |
|---|---|---|
--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 |