Space Reference

The space attribute controls sizing and spacing.

Syntax

[breakpoint]:[property]:[scale]

Breakpoints: mob:, tab:, lap:, desk:

Scale values: none, tiny, small, medium, big, giant, vast

Spacing

Padding - Inner spacing (p, p-t, p-r, p-b, p-l, p-x, p-y)
Margin - Outer spacing (m, m-t, m-r, m-b, m-l, m-x, m-y)
Gap - Flex/grid spacing (g, g-x, g-y)

Dimensions

Width - Element width (w, min-w, max-w)
Height - Element height (h, min-h, max-h)

Reference

Arbitrary Values - Escape hatch syntax [value]
Scale Reference - Scale keyword values

Quick Example

html

<div space="p:medium m-b:big w:[100%] max-w:[800px]">
  Card with medium padding, big bottom margin, and constrained width
</div>