Use spacing controls consistently
POM does not require empty blocks to create layout space. Use the control owned by the relationship you are adjusting.
Where spacing lives
| Relationship | Supported control |
|---|---|
| Space around a Page Builder row or column | Spacing group |
| Paragraph-to-paragraph rhythm | Paragraph margin bottom in General styles |
| Heading-to-content rhythm | Headings margin bottom in General styles |
| Button border width or radius | Four-side control in Buttons |
| Component-specific internal spacing | The component's own setting, when provided |
Page Builder spacing
Rows, inner rows, columns, and inner columns provide separate Padding and Margin values for top, right, bottom, and left. The control uses pixels and four responsive views:
- Desktop;
- Tablet (horizontal): 768 px to below 992 px;
- Tablet (vertical): 544 px to below 768 px;
- Mobile: below 544 px.
Padding must not be negative. Margin can be used for external positioning, but negative values should be exceptional and tested carefully.
Establish a rhythm
For reusable template classes and Gutenberg text-block margin presets, use the shared 0, 0.375, 0.75, 1, 1.25, 2, 3, 4, 6, and 8rem scale. For example, p-1 adds 1rem padding and mb-2 adds 2rem bottom margin. See the complete helper reference. This does not change the arbitrary per-device Page Builder spacing values described above.
Choose a small progression of approved values and use each value for a defined relationship. For example, use one amount within a compact component, another between related groups, and a larger amount between page sections.
The settings interface does not assign semantic names to these spacing values, so record the agreed progression in the site design specification.
Avoid structural workarounds
Do not create space with:
- empty Text Blocks;
- repeated line breaks;
- empty columns;
- transparent images;
- copied arbitrary offsets.
These methods obscure source order and make responsive corrections harder.
Verify
Check every responsive view used by the component. Look for doubled section gaps, clipped focus outlines, excessive space after columns stack, and text crowded against a background or border.