How To Adjust Margins On A WordPress Post Page

Published February 5, 2023

Header image for blog post: How To Adjust Margins On A WordPress Post Page

Estimated reading time: 3 minutes

Small Gap, Big Frustration

Few things in WordPress generate more quiet rage than spacing. The text sits too close to the image, the heading crowds the paragraph, the whole page feels cramped, and the setting that controls it is nowhere obvious. The fix is easy once you know where WordPress hides the knobs, so here is the practical tour, from no-code to a little code.

First, Know the Difference: Margin vs. Padding

Both create space, on different sides of the fence. Padding is space inside an element, between its content and its edge. Margin is space outside it, pushing neighbors away. If a colored box feels cramped, you want padding. If two blocks sit too close together, you want margin. Knowing which one you are chasing saves half the fiddling.

Option One: The Block Editor's Own Controls

Recent WordPress versions put spacing controls right in the editor for many blocks:

  • Click the block, open the settings panel on the right, and look under Dimensions (or Spacing) for margin and padding sliders.
  • If you do not see them, click the three-dot menu in the panel: some controls hide until enabled.
  • The Spacer block is the blunt instrument: insert it between two blocks and drag it to the gap you want. Not elegant, entirely effective.

Availability depends on your theme, since themes decide which controls blocks expose. If the panel is barren, your theme is the reason, and the next options are for you.

Option Two: The Customizer's Additional CSS

For control the editor will not give you, a few lines of CSS work on any theme. Go to Appearance, then Customize, then Additional CSS, and target the element that needs air. A couple of honest examples:

  • .entry-content p { margin-bottom: 1.5em; } gives every paragraph on your posts more breathing room.
  • .entry-content img { margin: 2em 0; } puts vertical space around images.

Preview shows changes live before you publish, and nothing is permanent: delete the CSS and the old spacing returns. If CSS is new territory, our plain-English primer What Is CSS explains what these lines are actually doing.

Option Three: When It Is the Theme's Fault

Sometimes the spacing problem is global: everything everywhere is cramped, because the theme's designers made dense choices. Fighting a theme one CSS override at a time turns into a hobby. At that point the real options are a theme better matched to your taste, or having the stylesheet professionally adjusted once, correctly, at the source.

A Note on Page Builders

If your site uses a page builder like Elementor or Divi, spacing lives in each element's Advanced settings as explicit margin and padding fields. The trap is inconsistency: hand-tuned spacing on every element, slightly different each time, ages into a lumpy page. Pick standard values and reuse them.

When to Stop Fiddling

Adjusting a margin is a fine Saturday task. Re-spacing an entire site is design work, and doing it well means a consistent rhythm across every page and screen size, which is stylesheet craft rather than slider luck. If your site needs the second kind of fix, our maintenance team does it at the source so it stays fixed. Send us the page that annoys you, and we will tell you which kind of problem it is.

Web Experts blog return logo

CONTACT

Tell us what you need and we will follow up.

Atlanta, GA | 404-870-0020

Serving Atlanta metro and clients across Georgia and the United States.

Ready to send.