WordPress Block Spacing: Margin, Padding, and Gap

Margin creates space outside a block. Padding creates space inside its boundary.

Block gap controls space between children owned by one container. Each tool answers a different relationship.

Use theme spacing presets whenever possible. Shared values remain easier to maintain than random numbers.

Compare margin, padding, and gap

• Margin separates one block from neighbouring content.
• Padding separates content from its own background or border.
• Gap separates children inside a layout container.

Ask who owns the empty space. That answer usually identifies the correct control.

Use margin for outside relationships

Margin sits beyond a block’s border. It changes separation from preceding or following content.

A heading may need more space before it than after it. Margin can express that relationship.

Prefer shared theme rules for common blocks. Repeated local margins create inconsistent vertical rhythm.

Use padding for inside space

Padding sits between content and its container edge. Backgrounds and borders reveal it clearly.

Cards, notices, Cover content, and coloured Groups commonly need padding. Plain paragraphs usually do not.

Set padding on the shared container. Avoid padding every child to imitate one section boundary.

Use block gap for siblings

Block gap controls spacing between direct children. WordPress labels this control Block spacing. We wrote that up in WordPress block typography without CSS guesswork.

The official spacing guide documents blockGap. Supported containers use generated layout styles.

Groups, Rows, Columns, Buttons, and Social Icons may expose it. Exact support depends on configuration.

Find spacing controls in the editor

1. Select the owning block.
2. Open the settings sidebar.
3. Choose the Styles tab when required.
4. Expand Dimensions.
5. Inspect margin, padding, and Block spacing.
6. Choose a preset or permitted value.
7. Preview the frontend.

Some controls remain hidden until the theme enables them. Some blocks support only particular sides.

Understand block support

Blocks declare which spacing properties they support. Themes decide whether corresponding editor tools appear.

The Block Supports reference documents margin, padding, and gap support. Supported values enter block style attributes.

A missing control may be intentional. Do not assume the editor has failed.

Understand theme ownership

The theme can enable spacing controls through theme.json. It can also define shared spacing presets.

Those decisions shape every editor’s available vocabulary. A small approved scale improves consistency.

Theme defaults can style blocks without exposing local controls. Governance and flexibility are separate decisions.

Use spacing presets

Presets provide named or stepped values. WordPress generates reusable custom properties for them.

Choose presets by relationship, not visual guessing. Tight, standard, and spacious roles can guide editors.

A preset can change centrally during a redesign. Hard-coded local values remain scattered through content.

Connect those presets through a reusable WordPress design system.

Limit custom spacing values

Custom values help exceptional compositions. They also let near-duplicate values accumulate quickly.

Use them only when the shared scale cannot express a real requirement. Document repeated exceptions.

Repeated exceptions often reveal a missing preset. Add that value at the design-system layer.

Set vertical rhythm globally

Vertical rhythm describes recurring separation through the page. Paragraphs, headings, lists, and media contribute.

Root block gap can establish a baseline. Block-specific styles can adjust meaningful exceptions.

Typography also affects perceived space. Line height and font size can make identical gaps feel different.

Use heading spacing semantically

A heading belongs more closely to following content. Its preceding separation can therefore be larger.

Apply that rule consistently through theme styles. Do not add Spacer blocks before every heading.

Check headings after images, lists, and nested containers. Context can expose doubled spacing.

Build padded section backgrounds

1. Add a Group block.
2. Apply the background to that Group.
3. Add vertical and horizontal padding.
4. Set Block spacing for its children.
5. Keep child margins at shared defaults.
6. Test narrow screens and zoom.

The Group owns its edge and child relationships. This produces one understandable spacing model.

Space cards consistently

Card padding creates space inside each card. Grid or Row gap separates neighbouring cards.

The card’s internal Stack can own child spacing. This keeps card anatomy consistent across layouts.

Avoid margins on every card side. Container gap handles shared sibling separation more predictably.

Space Buttons and Social Icons

Use the parent Buttons or Social Icons gap. Individual child margins complicate wrapping.

Test horizontal and vertical gap after reflow. Wrapped controls need useful separation in both directions.

Keep touch targets large enough. Empty separation cannot compensate for undersized interactive controls.

Space Columns and Grids

Container gap should separate columns or grid items. Child padding belongs inside each panel.

Check vertical spacing after columns stack. A desktop horizontal gap may become a mobile vertical gap.

Nested containers can add their gaps together. Inspect the hierarchy before reducing random values.

Understand margin collapse

Vertical margins can collapse under normal CSS flow. The visible space may not equal both values combined.

WordPress layout styles often manage vertical relationships deliberately. Custom CSS can reintroduce different behaviour.

Inspect computed styles when results appear inconsistent. Guessing from stored values is insufficient.

Avoid double spacing

Parent gap and child margin can both affect one boundary. Nested Groups can add further space.

Choose one primary owner for each relationship. Reset local exceptions only after identifying them.

Empty paragraphs can also create unexplained gaps. Find them through List View.

Use Spacer blocks deliberately

A Spacer block represents an explicit empty region in content. That can occasionally be appropriate.

It should not repair every theme rhythm problem. Repeated Spacers create difficult responsive maintenance.

Use margin, padding, or gap when the space belongs to an existing relationship.

Avoid empty Paragraph blocks

Empty paragraphs are accidental content, not a spacing control. Editors can remove them unknowingly.

They may also create unexpected editor and frontend differences. Delete them and style the owning boundary.

Check copied content for repeated empty blocks. Pasted line breaks often create them.

Avoid line breaks as layout tools

Line breaks belong inside text content. They should not create distance between separate blocks.

Manual breaks fail when line length, font size, or translation changes. Use actual block spacing.

Use responsive spacing

Large desktop padding can overwhelm narrow screens. Shared fluid presets can scale within sensible limits.

Test every container at awkward widths. Horizontal padding must leave enough room for useful content.

Do not remove all mobile space. Edges, controls, and grouped ideas still require separation.

Choose units intentionally

Relative units can follow type or viewport changes. Pixels provide a fixed CSS reference unit.

Percentages depend on containing dimensions and can surprise editors. Viewport units may grow excessively.

Presets hide unnecessary unit decisions from routine editing. Theme authors still choose their implementation carefully.

Check logical sides

Top, right, bottom, and left controls reflect physical sides. Writing direction can change ideal relationships.

Theme CSS can use logical properties for broader language support. Test right-to-left content when required.

Avoid asymmetry without purpose. Direction-specific spacing becomes expensive across translated sites.

Protect focus outlines

Controls near container edges need room for visible focus outlines. Overflow rules can clip them.

Keyboard-test buttons, links, inputs, and navigation after spacing changes. Visual balance is not enough.

Keep tap targets separate

Closely packed controls increase accidental activation. Use gap between controls and adequate internal padding.

Padding enlarges the clickable area only when applied inside the control. Outside margin does not.

Diagnose missing spacing controls

1. Select the intended parent block.
2. Open Styles and Dimensions.
3. Confirm the block supports that property.
4. Check theme.json spacing settings.
5. Review role and editor restrictions.
6. Test the active theme on staging.
7. Use CSS only for unsupported needs.

The editor may hide unsupported or disabled tools. That limitation can be an intentional governance choice.

Diagnose unexpected space

1. Open List View.
2. Find empty Paragraph or Spacer blocks.
3. Inspect the nearest parent gap.
4. Inspect child margins.
5. Check parent padding.
6. Review nested container layers.
7. Inspect computed frontend styles.
8. Remove one suspect value.

Measure the actual boundary in browser tools. Visible emptiness alone cannot identify its owner.

Reset local spacing safely

Save a revision before removing several overrides. Compare against a theme-styled example.

Reset one property at a time. Confirm whether margin, padding, or gap caused the defect.

Do not erase deliberate campaign or component spacing. Document exceptions that remain.

Create spacing patterns

Patterns can package reviewed Groups, padding, gaps, and responsive structure. Editors replace content without recreating relationships.

Use presets inside patterns. One-off values become copied technical debt.

Test optional and repeated children. Their removal can expose assumptions about edge spacing.

Audit spacing after theme updates

Theme updates can change default gaps, presets, or block styles. Local content values may then combine differently.

Maintain a regression page with headings, lists, cards, Columns, Buttons, and nested Groups.

Test editor and public output. Cached frontend styles may hide the latest result.

Treat negative margins as exceptional

Negative margins pull blocks across normal boundaries. They can create purposeful overlap in controlled patterns.

They can also cover content, focus rings, or controls. Test every expected width and state.

Prefer maintained pattern CSS over repeated local negative values. Document the containing block assumptions.

Space Cover content safely

Cover padding separates text from image edges. It also protects content from aggressive responsive cropping.

Use an inner constrained Group when content needs a readable measure. Let the outer Cover own height.

Check long headings and buttons at narrow widths. Large fixed padding can leave almost no content space.

Space separators by relationship

A Separator marks a thematic boundary. Its surrounding space should reinforce that structural change.

Use shared block styles for repeated separators. Local margins make identical boundaries feel inconsistent.

Do not add a Separator solely to create whitespace. Use the appropriate spacing property instead.

Coordinate spacing with borders and shadows

Borders make padding visible. Shadows can make external separation feel smaller than its measured value.

Review the complete component, not isolated numbers. Visual weight changes perceived space.

Keep shadow overflow away from neighbouring controls. Clipping can create abrupt edges and hidden focus.

Create a documented spacing scale

Assign each preset a value, name, and intended relationship. Examples help editors choose correctly.

• Use the smallest steps for compact inline relationships.
• Use middle steps for ordinary block rhythm.
• Use larger steps for section boundaries.
• Reserve the largest steps for deliberate composition.

Do not assign every step to every property. Component needs should guide which controls remain available.

Migrate legacy spacing carefully

Legacy content may use inline margins, empty paragraphs, shortcodes, or theme-specific classes.

Inventory those shapes before bulk replacement. One rule will not preserve every intended relationship.

Map repeated values toward theme presets. Keep exceptions only with a verified content reason.

Train editors with boundary language

Teach outside, inside, and between before teaching property names. The relationship is easier to remember.

Show one correct Group, Row, and card example. Let editors inspect their ownership through List View.

Document the approved presets and weak cases. Good governance explains exceptions instead of banning thought.

Review spacing after replacing content. Longer labels and additional children can change every visible relationship.

Keep one regression page with real components. It makes theme spacing changes easier to detect.

Block spacing checklist

1. Name the relationship creating the space.
2. Use margin outside a block.
3. Use padding inside its boundary.
4. Use gap between owned children.
5. Prefer shared spacing presets.
6. Remove accidental empty blocks.
7. Check nested container layers.
8. Test reflow and browser zoom.
9. Protect focus and touch targets.
10. Inspect computed frontend styles.
11. Document necessary local exceptions.
12. Retest after theme updates.

Frequently asked questions

The verdict

Specialist blocks work best when they respect the same spacing system. Test free plugins first. Then compare the $299 lifetime suite when several Pro blocks fit maintained pages.