Spacing¶
Padding and margin, each as an interactive box-model diagram rather than a plain class dropdown.
- Pattern buttons — All sides / Vertical / Horizontal / Custom, plus Reset — choose how many independent values you're setting before you touch the diagram.
- Click-to-cycle badges — each side of the box shows its current size in px; clicking a badge steps to the next configured size, so no dropdown or typing is needed for the common case.
- Center-block — on Margin only, a toggle for the common
margin-inline: autopattern.
Per-side classes (pt-*, pr-*, pb-*, pl-*, or the axis tokens px-* /
py-* when opposite sides match) are derived in the browser from the
single configured class list (padding_classes / margin_classes) using the
framework's side-letter map — a Bootstrap site derives pt-/pe-, a Tailwind
site the same pt-/pr-. See
Styles → Important notes for the Tailwind
safelist implication.
Seeded defaults¶
padding_classes and margin_classes share the same None/Small/Medium/Large
scale (base/mobile value shown):
| Step | Padding | Margin |
|---|---|---|
| None | cb-p-0 |
cb-m-0 |
| Small | cb-p-s |
cb-m-s |
| Medium | cb-p-m |
cb-m-m |
| Large | cb-p-l |
cb-m-l |
cb-p-*/cb-m-* are the module's own generated spacing utilities — see
Frameworks → Custom.
| Step | Padding | Margin |
|---|---|---|
| None | p-0 |
m-0 |
| Small | p-2 |
m-2 |
| Medium | p-4 |
m-4 |
| Large | p-5 |
m-5 |
| Step | Padding | Margin |
|---|---|---|
| None | p-0 |
m-0 |
| Small | p-2 |
m-2 |
| Medium | p-6 |
m-6 |
| Large | p-12 |
m-12 |