Padding, margin e gap numa escala única — pp · p · m · g · gg · xg · xxg.
O que é
Mesma escala de tamanho em toda parte — aprende uma vez, usa em padding, margin e gap igual. 7 degraus, de 4px a 120px.
Como funciona
Sufixos de lado (t/r/b/l) e eixo (x/y) seguem o mesmo padrão do CSS lógico — funciona junto com qualquer direção de texto. A escala vem de --sw-s-pp…--sw-s-xxg, que por baixo apontam pra escala numérica bruta (--sw-s-2…--sw-s-60).
Exemplos
A escala inteira — 7 degraus, de 4px a 120px Ao vivo
pp · 4px
p · 8px
m · 16px
g · 24px
gg · 48px
xg · 80px
xxg · 120px
<!-- os quadrados mostram o GAP real entre eles, na medida exata -->
<div class="flx gap-pp">…</div> <!-- 4px — var(--sw-s-pp) -->
<div class="flx gap-p">…</div> <!-- 8px — var(--sw-s-p) -->
<div class="flx gap-m">…</div> <!-- 16px — var(--sw-s-m) -->
<div class="flx gap-g">…</div> <!-- 24px — var(--sw-s-g) -->
<div class="flx gap-gg">…</div> <!-- 48px — var(--sw-s-gg) -->
<div class="flx gap-xg">…</div> <!-- 80px — var(--sw-s-xg) -->
<div class="flx gap-xxg">…</div> <!-- 120px — var(--sw-s-xxg) -->
<!-- a MESMA escala vale pra padding e margin -->
<div class="p-g">padding grande — 24px</div>
<div class="m-m">margin média — 16px</div>
Padding real numa caixa Ao vivo
.p-g (24px)
.p-gg (48px)
<div class="p-g bd bg-sur">conteúdo com padding grande</div>
<div class="p-gg bd bg-sur">conteúdo com padding bem grande</div>
Lado e eixo — mesmo padrão pra padding e margin Ao vivo
pt-g pr-p
px-g py-m
<!-- lado: t (top) r (right) b (bottom) l (left) -->
<div class="pt-g">padding só em cima, grande</div>
<div class="mr-p">margin só à direita, pequena</div>
<!-- eixo: x (horizontal) y (vertical) -->
<div class="px-g py-m">padding lateral grande, vertical média</div>
<div class="mx-m my-p">margin horizontal média, vertical pequena</div>
<!-- idêntico pra margin: mt- mr- mb- ml- / mx- my- -->
Atributos
Nenhum.
Variantes
p-{escala} · m-{escala} · gap-{escala}
padding / margin / espaço entre itens (flex-grid) em todos os lados
