Spacing
Margin, padding, and gap utilities — all built from the same generator loop across 14 prefixes, so what's true for one is true for (almost) all of them. This page covers every variant, including the ones that look valid but silently do nothing.
The scale
Margin and padding share one scale, 0–5 plus auto:
| Key | Value |
|---|---|
0 | 0 |
1 | 0.25rem |
2 | 0.5rem |
3 | 1rem |
4 | 1.5rem |
5 | 3rem |
auto | auto |
The scale stops at 5 — there is no 6, 7, or beyond
m-6, p-7, px-6 — none of these exist, at any prefix. They have no brackets, so they don't fall back to the arbitrary matcher either; the lookup just fails and nothing is emitted, no warning. See Scale ceiling below for a live demo.The 14 prefixes
Every prefix below shares the same scale, the same responsive variants, and the same !important form — they're generated by one loop over this exact list:
| Prefix | CSS property/ies |
|---|---|
m | margin |
mt | margin-top |
mb | margin-bottom |
ms | margin-left |
me | margin-right |
ml | margin-left (alias of ms) |
mr | margin-right (alias of me) |
mx | margin-left + margin-right |
my | margin-top + margin-bottom |
p | padding |
pt | padding-top |
pb | padding-bottom |
ps | padding-left |
pe | padding-right |
pl | padding-left (alias of ps) |
pr | padding-right (alias of pe) |
px | padding-left + padding-right |
py | padding-top + padding-bottom |
ms/me/ps/pe are physical, not RTL-logical
ml/mr/pl/pr are plain aliases of the same properties, included for anyone arriving from Tailwind.Margin & padding
Directional & axis
Auto margins
Every one of the 14 prefixes gets an auto entry from the same loop that builds the numeric scale. On the margin side that's all genuinely useful CSS — ms-auto/me-auto is the classic push-to-the-edge trick inside a flex row:
<nav class="d-flex align-items-center">
<span>Logo</span>
<a class="ms-auto" href="/login">Log in</a>
</nav>p*-auto exists but is always dead — CSS padding has no auto
p-auto, pt-auto, ps-auto, px-auto — the same generator loop produces all of these, but padding doesn't accept auto as a value at all. Every one compiles to an invalid declaration the browser silently drops. Toggle both below — p-auto changes nothing on top of p-3:Physical aliases
Responsive
Every prefix, every scale key (including auto), at every breakpoint:
!important variant
Prefix any spacing class with ! for an !important version — this is a framework-wide mechanism, not spacing-specific, but spacing is where you'll reach for it most (overriding a component's own padding, say):
Arbitrary values
Any value in brackets works on any prefix — but there's a real distinction in what a multi-value declaration does depending on which prefix you use it on.
Single value — works on every prefix
Negative values — the only way to get negative margin
There's no named negative-margin scale, so pulling an element outward always goes through arbitrary:
Multi-value — shorthand m-[...]/p-[...] only
px-[10px_20px] is invalid — use p-[10px_20px] instead
m/p map to the shorthand property (margin/padding), which accepts a two-value declaration. Every directional/axis prefix (mt, px, py, etc.) maps to one or two longhand properties, each of which only accepts a single value — px-[10px_20px] would apply the literal two-token string to both padding-left and padding-right, which is invalid CSS and gets silently dropped. Keep directional/axis arbitrary values to one token.Responsive + !important compose with arbitrary too
Scale ceiling
Toggle m-6/m-7 below on top of m-5 — nothing changes, because neither class emits any CSS at all:
Past the ceiling, arbitrary is the only way to go bigger:
Gap
gap/row-gap/col-gap are also spacing — they set flex/grid item spacing rather than margin/padding, but share the same underlying 0–5 scale (built from a separate scale object with the same values). Unlike margin, there is no auto entry at all — gap-auto doesn't exist, since gap: auto isn't meaningful CSS the way margin: auto is. There's also no named !important variant — only the arbitrary form supports it.
Responsive
Arbitrary
gap is itself a shorthand (row + column), so it accepts a multi-value declaration — row-gap/col-gap don't, same rule as margin/ padding above:
Responsive + !important
Same ceiling as margin/padding
Grid gutters (g/gx/gy) are a related but separate mechanism
g/gx/gy share the same 0–5 ceiling, but they set the --st-gutter-x/--st-gutter-y custom properties the grid system reads — not a gap property directly. They're covered on the Grid page instead of here.