Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Padding adds space inside a block’s border; margin adds space outside it. Padding keeps the block’s background, border and (when applicable) clickable area around the added space. Margin separates the block from neighboring content. WordPress also offers block spacing, which controls gaps between children inside a container and is neither padding nor margin.
The difference in one glance
| Question | Padding | Margin |
|---|---|---|
| Where is the space? | Between the content and the block’s border | Outside the block’s border |
| Does the background or border cover it? | Yes. The block’s background and border extend around the padding. | No. The margin is outside the painted box. |
| Typical purpose | Breathing room inside a component such as a Group, Button or call-to-action | Separation between a block and surrounding content |
| What does it directly affect? | The interior size of the block | The block’s position relative to neighboring elements |
| Where is it configured? | Only when the selected block and active theme expose padding controls | Only when the selected block and active theme expose margin controls |
This follows the CSS box model: content is surrounded by padding, then a border, with margin outside the border. WordPress.org defines it this way: “Padding is the space between a block’s content and its border, whereas Margin is the space outside the border of a block.”
When to use padding
Keep space inside a colored or bordered component
Use padding when the empty area should remain part of the component. If a Group block has a background color, increasing its padding creates more room around its contents while the color still fills that room. The same principle applies to a Button or call-to-action block: padding makes the label less cramped and can enlarge the clickable surface without adding a separate gap outside the button.
Create consistent interior rhythm
Padding is useful for cards, notices, hero sections and navigation elements where text, icons or controls need a predictable inset from the edges. It changes the component’s interior dimensions, so check the result at narrow widths after increasing left and right padding.
When to use margin
Separate neighboring blocks
Use margin when the goal is space between a block and whatever comes before or after it. For example, a bottom margin on a heading can separate it from the paragraph below without enlarging the heading’s background or border.
Control a section’s outside position
Margin can create space between a block and the edges or other blocks in the layout. Because it is outside the border, it does not become part of a colored panel or button. Use it for external separation, not for making text inside a panel feel less crowded.
Block spacing is a third setting
Block spacing controls the gap between nested blocks in a container such as Group or Columns. It is different from both other properties:
- Padding adds space between a container’s content and its own border.
- Margin adds space outside an individual block’s border.
- Block spacing adds a consistent gap between the container’s child blocks.
If a Group contains a heading, paragraph and Button, block spacing can set the distance between those three children. It does not add an inset around the Group’s perimeter; use padding for that. It also does not represent an individual child’s outside margin.
How to change padding or margin in the Block Editor
- Select the block you want to style in the editor.
- Open the block’s Settings sidebar and choose Styles.
- Open Dimensions (the label and available controls can vary by block and theme).
- Choose Padding or Margin, then enter a value and select a unit when available.
- Leave the sides linked to apply one value to all sides, or unlink them to edit top, right, bottom and left independently.
WordPress may offer pixels (px), percentages (%), em, rem, viewport width (vw) and viewport height (vh), depending on the control and theme. When sides are unlinked, the editor indicates the dimension being changed around the block. Independent sides are useful for layouts that need, for example, extra space above a heading or reduced side padding on a narrow design.
Why the Dimensions controls may be missing
A missing control is usually conditional rather than an indication that CSS cannot style the block. The visible options depend on several factors:
- The selected block: not every block supports every spacing property.
- The active theme: theme settings determine which spacing features the editor exposes.
- WordPress version and editor context: newer releases and block themes may provide controls that an older setup does not.
- Theme or plugin restrictions: a design system can limit units, presets or custom values.
First select the exact block, then inspect Styles → Dimensions. If the panel is absent, check the theme’s spacing support and whether the block offers a related setting such as block spacing. A custom CSS class is a fallback when the interface does not expose the property, but it is better to use the native control when it is available so the setting remains editable in the site’s design system.
How themes control spacing features
Block themes and classic themes can declare spacing support in theme.json. The relevant settings include custom margin and padding, supported units, and spacing presets. Theme configuration can also enable block gap, which allows the editor to expose controls for gaps between nested blocks.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →{
"settings": {
"spacing": {
"customMargin": true,
"customPadding": true,
"units": ["px", "%", "em", "rem", "vw", "vh"]
}
}
}The exact theme configuration may include additional settings and preset definitions. When a theme enables margin, padding or block-gap support, WordPress can provide the corresponding user-interface controls and CSS custom properties for presets. If a theme intentionally disables custom values or limits units, those choices are reflected in the editor.
Preset spacing versus custom values
A theme can publish named spacing presets so users choose approved values instead of entering arbitrary numbers. This keeps layouts consistent across templates and reusable blocks. Custom values are more flexible but can create one-off spacing that does not match the rest of the design.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Version context
WordPress 6.1 introduced preset values for padding, margin and block gap, according to a WordPress Core development note dated October 7, 2022. The controls you see today still depend on the active block and theme, so a site running a newer WordPress release may not display every option if its theme does not declare support.
Quick Recap
A practical decision guide
- Choose padding when the space should be inside a panel, card, button or other component and share its background or border.
- Choose margin when the space should separate one block from surrounding blocks or sections.
- Choose block spacing when you need a repeatable gap between children inside a Group, Columns or another container.
- Use independent side values when the design is intentionally asymmetric; otherwise linked values are easier to maintain.
- Check the result at the site’s narrowest expected width, especially after adding horizontal padding or large margins.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
