Control spacing and alignment

Spacing should describe relationships between sections and components. Apply it to the container that owns the relationship instead of inserting empty content.

Choose the correct level

Padding and external separation

Padding creates room inside a row or column, so its background and border continue around that room. External separation places space between neighboring containers.

Do not use:

• empty Text Blocks;
• repeated <br> tags;
• empty columns;
• transparent images;
• arbitrary values copied from unrelated pages.

These workarounds obscure the page structure and often produce excessive space on narrow screens.

For a deliberate fixed spacer in simple content, insert the Gap block. Choose one of the shared 0.75, 1.25, 2, 3, 4, 8, or 12rem values in the inspector, or drag the block vertically. Dragging is magnetic and always settles on one of those exact rem values. The block saves one web-gap-* helper in static HTML and does not load frontend CSS or JavaScript of its own.

With the Gap resize handle focused, use Up/Down to step through the scale and Home/End to choose its smallest/largest value. Device Visibility controls the complete spacer; Advanced > HTML anchor assigns its ID. Hidden spacers remain selectable in the editor.

Adjust duplicated rows and columns in the legacy Page Builder

Duplicating a row or column copies its current spacing settings. To adjust a copy:

1. Open the page under Pages and edit the copied row or column in the Page Builder.
2. Open Spacing and set its padding and external separation for Desktop, Tablet (horizontal), Tablet (vertical) and Mobile as needed.
3. Save the element, then update the page.
4. Preview the original and the copy at each affected width. Each uses its own spacing values, including nested rows and columns.

Legacy Page Builder spacing uses pixels. Desktop values apply by default; the smaller device fields override them only within their labeled range. Enter 0 to explicitly remove spacing in that range. These controls use a different inheritance model from the Gutenberg controls described below.

Use Spacing to change these values and Extra class name for your own CSS hooks. Generated spacing classes are managed by the theme and do not need to be edited in the page content. After updating the theme, update existing affected pages to regenerate their page styles, then clear any page or CDN cache before checking the result.

Align column content

Columns can align their content above, in the middle, or below. Use middle alignment for short paired regions such as copy beside an image. Prefer top alignment when columns contain long or variable content.

After columns stack, check that vertical alignment or minimum-height choices do not leave a large empty area.

Keep a consistent rhythm

Paragraph, Heading, List and List Item margin presets use the shared rem helpers: 0, 0.375, 0.75, 1, 1.25, 2, 3, 4, 6, and 8rem. Section, Row and Column retain their separate responsive padding/margin inputs, including custom units. Those authored values are not rounded to the helper scale.

The editor and frontend use the same 100% root font-size contract: normally 1rem is 16px, while browser font preferences can change that baseline. In responsive Section, Row and Column spacing and border-width fields, an empty value inherits from the preceding smaller range. Enter 0 when you want to remove that side's spacing or width from a particular range upward.

Reuse the site's established spacing values for similar relationships: section to section, heading to paragraph, and paragraph to action. If many pages need the same exception, move the decision into the design system instead of repeating builder overrides.

Verification

Preview every affected viewport range and check:

• the first and last components are not crowded against the container edge;
• adjacent sections do not double their separation;
• wrapped headings do not collide with following content;
• stacked columns have neither missing nor excessive space;
• focus outlines and interactive controls are not clipped.