Block Dimensions

Block Dimensions include Padding, Margin, and Block Spacing which control spacing within and around blocks. These settings help you manage layout, alignment, and visual rhythm across a page. Understanding how these settings work — and when to use each — is key to building consistent, responsive layouts.

Start here: watch the walkthrough video (4 minutes)

Understanding padding, margin, and block spacing

These controls are available in the Styles tab of the block settings sidebar on many — but not all — blocks. Padding and Margin are very common, while Block Spacing is typically available only on container-style blocks.

Although these settings are related, they control different types of space.

Padding

Padding adds space inside a block — between the block’s content and its outer edge. Padding expands the internal space of a block.

Use Padding when you want to:

  • Increase breathing room inside a section
  • Add space between text and a background color
  • Prevent content from touching the edge of a container

Margin

Margin adds space outside a block — between that block and the blocks around it. Margin affects how a block relates to surrounding content.

Use Margin when you want to:

  • Increase space between sections
  • Create visual separation between elements
  • Adjust spacing above or below a specific block

Block Spacing

Block Spacing controls the space between inner blocks inside a container block. Block Spacing affects the relationship between blocks inside the container — not the space outside the container itself.

This setting is typically available on layout or container blocks such as Group, Columns, Buttons, Social Icons, and Query Loop.

Use Block Spacing when you want to:

  • Adjust the space between paragraphs, headings, or images inside a Group block
  • Increase or decrease the vertical spacing between stacked elements within a section
  • Control the gap between columns inside a Columns block
  • Adjust spacing between items arranged in a layout container

How to access dimension controls

  1. Select a block
  2. Open the Block settings panel in the right sidebar
  3. Click the Styles tab
  4. Locate the Dimensions section

Available settings may include Padding, Margin, and/or Block Spacing, depending on the block selected.

How to adjust dimensions

Dimension controls typically use preset spacing increments.

To adjust a dimension:

  1. Click into the desired field (Padding, Margin, or Block Spacing)
  2. Choose from the preset spacing options from None to XX Large on the range slider.

Using preset values ensures spacing stays consistent and responsive across screen sizes.

Adjusting individual sides

By default, spacing may be applied evenly to all sides or to top/bottom and left/right.

To control sides individually:

  1. Locate the link/unlink icon next to the dimension control
  2. Click to unlink the sides
  3. Enter or select different values for Top, Right, Bottom, and Left

Unlinking allows precise control when layouts require asymmetric spacing.

Resetting dimensions

If spacing adjustments need to be removed:

  1. Open the Dimensions Options (three-dot icon)
  2. Click the Reset option (if available)

Resetting restores the block’s default spacing values.

Some blocks may already have default padding or margin applied by the design system. While the control may not display the default value numerically, adjusting and then resetting will restore the original setting.

Using custom pixel values

Dimension controls allow custom values to be entered in pixels. However, this is not recommended in most cases. Custom pixel values can break visual rhythm and reduce layout consistency across screen sizes.

Instead:

  • Use the preset spacing increments
  • Maintain consistency across sections
  • Allow spacing to adapt responsively across devices

Best practices

Use spacing intentionally

Avoid adding multiple Spacer blocks when padding or margin adjustments would be more appropriate.

Adjust containers first

When working within layout blocks (like Group or Columns), adjust Block Spacing before adding individual margins to child blocks.

Maintain consistent rhythm

Use consistent spacing values within sections to create a clean, predictable layout.

Preview across devices

Spacing can feel very different on mobile. Always preview layouts at multiple screen sizes.