Spacing

Margin and padding utilities aligned to 8px grid.

Padding

p-1 (8px padding)

p-2 (16px padding)

p-4 (32px padding)

Base

Class	Description
`.ui-spacing`	Base class

Directional Padding

px-4 py-2 (horizontal 32px, vertical 16px)

pt-4 pb-1 (top 32px, bottom 8px)

ps-4 pe-1 (start 32px, end 8px)

<div class="ui-px-4 ui-py-2 ui-bg-muted">px-4 py-2 (horizontal 32px, vertical 16px)</div>
<div class="ui-pt-4 ui-pb-1 ui-bg-muted">pt-4 pb-1 (top 32px, bottom 8px)</div>
<div class="ui-ps-4 ui-pe-1 ui-bg-muted">ps-4 pe-1 (start 32px, end 8px)</div>

Margin

mb-2 (16px bottom margin)

mt-4 mb-2 (top 32px, bottom 16px)

mx-auto (centered with auto margins)

<div class="ui-mb-2 ui-bg-muted">mb-2 (16px bottom margin)</div>
<div class="ui-mt-4 ui-mb-2 ui-bg-muted">mt-4 mb-2 (top 32px, bottom 16px)</div>
<div class="ui-mx-auto" style="background: var(--ui-color-bg-muted); max-inline-size: var(--ui-row-8)">mx-auto (centered with auto margins)</div>

Gap

Item

<div class="ui-flex ui-gap-2">
  <div class="ui-p-2 ui-bg-muted">Item</div>
  <div class="ui-p-2 ui-bg-muted">Item</div>
  <div class="ui-p-2 ui-bg-muted">Item</div>
</div>