Spacing and gap helpers
POM's margin and padding helpers share a compact rem scale. The suffix is a token, not a pixel count:
| Suffix | Value | At the theme's 15px root |
|---|---|---|
0 |
0 |
0px |
0375 |
0.375rem |
5.625px |
075 |
0.75rem |
11.25px |
1 |
1rem |
15px |
125 |
1.25rem |
18.75px |
2 |
2rem |
30px |
3 |
3rem |
45px |
4 |
4rem |
60px |
6 |
6rem |
90px |
8 |
8rem |
120px |
Syntax:
m: margin on every side;mt,mr,mb,ml: margin on one side;p: padding on every side;pt,pr,pb,pl: padding on one side;mauto: automatic left and right margins.
Examples:
<section class="pt-125 pb-125">…</section>
<div class="mb-2">…</div>
<div class="mauto">…</div>The 100 numeric helpers use !important. Side-specific helpers follow all-side helpers in the stylesheet, so p-2 pt-0 keeps zero top padding. mauto retains automatic horizontal margins without !important.
The theme does not generate x or y axes, negative variants, breakpoint variants, or automatic-margin variants other than mauto. In particular, mr-auto is not supplied. Use component CSS or responsive builder controls for values outside this scale. Changing the root font size scales rem helpers; changing only a paragraph or body font size does not.
The previous pixel-named helpers are removed, not aliased. Migrate stored templates and legacy shortcode class attributes with the spacing helper migration command. Arbitrary padding/margin declarations and responsive Page Builder values remain unchanged.
Dedicated spacer elements use a compact rem scale:
| Helper | Height |
|---|---|
.web-gap-075 |
0.75rem |
.web-gap-125 |
1.25rem |
.web-gap-2 |
2rem |
.web-gap-3 |
3rem |
.web-gap-4 |
4rem |
.web-gap-8 |
8rem |
.web-gap-12 |
12rem |
The suffix identifies the rem value, not pixels. The previous bare .web-gap and .web-gap-10 through .web-gap-60 helpers are retired. Upgrade existing stored content with the documented gap helper migration.
Choose one owner for a boundary. If a component already supplies its outer margin, do not add an equal margin to the adjacent component unless the combined gap is intentional. Prefer padding when the background or clickable area should extend through the space; prefer margin for separation outside the component.
Prefer responsive spacing controls for device-specific layouts and rem helpers for reusable template spacing. Gutenberg text blocks offer the same top/bottom margin presets and preview them at the theme's root-equivalent size without changing the WordPress administration font size.