How to Adjust Margins in WordPress
Last updated: July 2026
Quick Answer
Learning how to adjust margins in wordpress starts with the block editor’s Dimensions panel. Click the block you want to change, look for “Dimensions” in the right-hand sidebar, and expand the Margin control. From there you can type an exact value or drag the slider for top, right, bottom, and left margins independently. If you do not see a Dimensions panel, your theme may need to enable spacing controls through theme.json, which a developer can turn on in minutes, similar to the setup work described in our guide on changing background color in the block editor.
Prerequisites
- A WordPress site running the block editor (Gutenberg), which ships by default with modern WordPress installs
- Admin or editor access to the page or post you want to change
- A block based theme, since classic themes sometimes limit which spacing controls appear
- Five minutes and a page that already has some content on it
Before diving into steps, it helps to know the difference between the two spacing properties people mix up constantly. Margin is the space outside a block, pushing other elements away from it. Padding is the space inside a block, between its border and its content. If your text feels cramped against a colored background, you probably need more padding, not margin. If two sections feel like they are touching, margin is usually the fix. As we cover at Canada Create, this single distinction resolves most of the spacing tickets we see from client sites.
Step 1: Open the Block You Want to Adjust
Click directly on the block, whether it is a paragraph, image, group, or column. A thin outline appears around it, and the block toolbar shows up above it. This selection step matters because margin settings in the block editor are scoped to whatever is currently selected, not the whole page. Canada Create readers migrating from other CMS platforms often compare this workflow to our notes on Drupal versus WordPress.
Finding the right block
If blocks are nested (for example, a paragraph inside a group inside a column), use the List View in the top toolbar to click through the layer you actually want. Adjusting the outer group’s margin behaves differently than adjusting the inner paragraph’s margin, so picking the correct layer avoids a lot of trial and error.
Step 2: Open the Dimensions Panel
For a deeper technical reference on how spacing controls are implemented, see the official WordPress Block Editor Handbook entry on the Spacer component.
With the block selected, look at the Settings sidebar on the right. Click the icon that looks like a gear or the “Block” tab if it is not already active. Scroll until you see “Dimensions.” This is where wordpress spacing settings live for the selected block, covering margin, padding, and sometimes minimum height.
What if Dimensions is missing?
Some classic or older themes do not declare support for spacing controls in their theme.json file. If the panel is missing entirely, a developer can add appearanceTools support to unlock it, which is a small code change rather than a plugin install. This is the kind of theme level fix our team handles as part of web design projects in Yorkville, Toronto.
Step 3: Set Custom Margin Values
Expand the Margin control inside Dimensions. You will usually see a linked icon that applies the same value to all four sides, and an unlinked option to set top, right, bottom, and left independently. Type a value directly (in pixels, ems, rem, or percent) or use the preset spacing scale your theme defines. This is the core action behind change block margin wordpress searches, and it works the same way across most block types.
Choosing units
Pixel values give you precise, predictable spacing but do not scale with font size. Rem or em values scale relative to text size, which can look more consistent across devices. For most small business sites, a fixed pixel or the theme’s preset spacing steps are the simplest choice. Canada Create readers building a store often ask whether this affects hosting budget decisions too, and the answer is no, spacing changes are purely visual and do not affect server load.
Step 4: Adjust Padding Separately if Needed
WordPress.com also documents the full set of dimension controls in its Block Dimensions Settings support article, which covers presets that ship with default themes.
Right below Margin in the Dimensions panel sits Padding, using the same linked or per side controls. Understanding wordpress padding vs margin here is what separates a section that looks cramped from one that breathes properly. If your content touches the edge of a colored block, increase padding. If two stacked blocks look too close together, increase margin on one of them.
Step 5: Check Responsive Behavior
Switch the editor’s preview to tablet and mobile view using the icons at the top of the screen. Margins that look fine on desktop can crowd text on a phone. Many themes let you set different spacing values per breakpoint directly in the Dimensions panel, so check each view before publishing.
Common mobile spacing mistakes
A margin that works at 40 pixels on desktop often needs to shrink to half that on mobile, or the page feels like it has too much dead space above the fold. Preview both views every time you make a spacing change to a template that repeats across pages.
Step 6: Save and Preview
Click Preview to see the change on the live front end, not just inside the editor canvas. The editor and the rendered page can differ slightly depending on theme styles, so always confirm in Preview before hitting Update or Publish.
Troubleshooting
- Margin change is not visible: A parent block may have its own overriding margin or a theme style is taking priority. Check the List View for a parent wrapper with conflicting settings.
- Dimensions panel is missing: Your theme likely has not enabled appearanceTools or spacing support in theme.json. This is a quick fix for a developer, and it is one of the more common gaps we resolve for clients, alongside issues covered in our WordPress security guide.
- Values reset after saving: Clear the browser cache or check for a caching plugin that is serving an old version of the page.
- Margin looks fine in editor but wrong on the live site: A separate CSS rule in your theme or a page builder plugin may be overriding block level settings. Inspecting the page with browser dev tools will usually reveal the conflicting rule, a step we also recommend in our comparison of WordPress and Webflow for B2B sites.
- Negative margins behave oddly: Some blocks do not support negative values through the UI. You may need a custom CSS class added through the Advanced panel instead, similar to the customization work in our WP Engine vs Kinsta hosting comparison.
Frequently Asked Questions
What is the difference between margin and padding in WordPress?
Margin is the space outside a block that separates it from neighboring elements. Padding is the space inside a block, between its border and its content. Getting comfortable with wordpress padding vs margin will solve most layout spacing questions.
Why isn’t my margin change showing up in WordPress?
Usually a parent block, a theme style, or a caching plugin is overriding it. Check List View for conflicting parent settings and clear any page cache before testing again.
How do I add space between blocks in WordPress?
Select the block above or below the gap, open Dimensions in the sidebar, and increase the margin on the side facing the gap. A Spacer block is also useful for one off gaps that do not need to be tied to a specific block’s settings.
Can I set different margins for mobile and desktop in WordPress?
Many block based themes support responsive spacing values directly in the Dimensions panel. If yours does not, a small custom CSS snippet with media queries can achieve the same result.
Do I need a plugin to adjust margins in WordPress?
No. The built in block editor’s Dimensions panel handles margin and padding for most sites. A plugin is only worth adding if you need advanced controls, like margin presets shared across many custom blocks.
