Width, spacing, alignment, and borders

Documentation / Design and styling

Use width and spacing to make the content readable before adding decoration. Change the container that owns the problem rather than inserting empty paragraphs to force a layout.

Set the outer width

Header and section Width offers Contained, Full, and Full bleed. Contained content follows the site's content container. Full uses the available width with responsive side padding. Full bleed removes that inner width padding, so check that text or controls do not end up against the screen edge.

Section Height offers Minimal, Medium, and Spaced. These choices control the section's vertical presentation. Header height is a separate control, with Extra top spacing where the selected presentation supports it.

Adjust internal spacing

A block's Design settings provides Padding and Cell gap. Rows use these settings for their surfaces and cell spacing. Text Settings includes Alignment and Bottom Spacing. The Space block supplies an explicit spacer when a separate spacing item is appropriate.

Choose one responsible spacing control where possible. A large section height plus large block padding and a spacer can create an unintended gap, especially on mobile.

Borders are not a universal panel

Do not assume every native block exposes arbitrary border width, style, radius, and color controls. Some listing presets provide a particular bordered appearance. Bespoke borders belong to reviewed custom CSS or shared design source when that capability is available.

Save and inspect the top, middle, and bottom of the page. Check text alignment, touch targets, wrapping, and horizontal overflow at narrow widths. A desktop layout with balanced empty space can become difficult to read on a phone.

See Page anatomy and the managed editor for container selection.