Skip to main content

Spacing

SJSS uses a spacing function to map numbers (e.g., 1..20) to pixel values based on the theme.

<div [sj]="sj.p(2)">Padding using spacing(2)</div>
<div [sj]="sj.m({ xs: 1, md: 2 })">Responsive margins</div>

Tip: Use component densities (e.g., usePadding="compact|default|comfortable|spacious") for consistent surfaces.

Live Example

If the embed doesn’t load, open it directly: Open on StackBlitz.