Latest SeedProd News

WordPress Tutorials, Tips, and Resources to Help Grow Your Business

How to remove space between blocks WordPress

How to Add or Remove Space Between Blocks in WordPress 

Written By: author avatar Stacey Corrin
author avatar Stacey Corrin
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.
     Reviewed By: reviewer avatar Turner John
reviewer avatar Turner John
John Turner is the co-founder of SeedProd. He has over 20+ years of business and development experience and his plugins have been downloaded over 25 million times.

White space in WordPress is the blank area between blocks that affects how clean, readable, and balanced your page looks. Getting it right makes your content easier to read and your design feel more professional.

I’ve seen many beginners struggle with pages that look “off” without realizing the issue is spacing. Too much, and everything feels disconnected. Too little, and it looks cluttered. The good news is you can adjust block spacing in WordPress without touching code.

In this guide, I’ll show you three simple ways to adjust spacing that are all beginner-friendly and work with any WordPress theme.

Why Add or Remove Space Between WordPress Blocks

White space isn’t wasted space. It’s what helps people focus on your content and understand the flow of your page. When the spacing feels right, your layout looks more intentional and easier to read.

Most WordPress themes add their own padding or margins by default, which can make sections look uneven. Adjusting those spaces gives you more control over how each part of your page connects.

Research shows that white space can improve comprehension by almost 20%. That means a few small spacing tweaks can make your content easier to read and more enjoyable to browse.

Here’s why you might want to fine-tune your block spacing:

  • Group related content for better clarity.
  • Separate different sections to improve flow.
  • Make pages easier to read and navigate.

Consistent spacing makes your website feel polished, professional, and easier to navigate.

Add or Remove Space Between WordPress Blocks Using SeedProd

The easiest way to manage white space in WordPress is with SeedProd, a drag-and-drop website builder that lets you design complete pages and themes without touching any code. It’s used by over a million website owners who want full visual control of their layouts.

SeedProd Drag-and-drop WordPress website builder

I use SeedProd myself to build my own website, and I’m not a designer. What I love is that I can see every change live, including adjusting space, moving sections, and balancing layouts until everything looks exactly right.

After installing and activating the plugin, open SeedProd » Landing Pages from your WordPress dashboard.

From here, you can create a new page or edit an existing one to launch the visual builder.

Inside the builder, you can drag and drop blocks directly onto your layout and instantly see how your page looks.

To add extra space, drag the Spacer block into your layout.

Use the height slider in the left panel to increase or decrease white space wherever you need it. I often add a bit of space between sections like hero banners, testimonials, and CTAs to make each one stand out.

You can also fine-tune spacing for any block individually. Click the block, open the Advanced tab in the left panel, and look for the Spacing section.

Here, you can adjust the Margin (space outside the block) or Padding (space inside it). Small tweaks here can make your design feel much more balanced and professional.

When you’re happy with the results, click Save and then Publish to make your page live. You can also preview your layout on mobile to check how the spacing looks across devices.

For help creating your first custom page, check out our full guide on how to create a landing page in WordPress.

Add or Remove Space Using the WordPress Block Editor

The WordPress block editor (also called Gutenberg) includes built-in tools for controlling white space. You can easily add or remove space between blocks using Spacer and Separator blocks, without adding extra WordPress plugins.

To start, open the post or page you want to edit and click the + Add Block button. In the search bar, type “Spacer” and select the Spacer block from the list.

This will insert a blank block into your layout. You can drag the handle at the bottom of the block or use the sidebar settings to adjust the height. The larger the height value, the more white space appears between your blocks.

For smaller visual breaks, try the Separator block instead. It adds a subtle divider line that helps split sections without creating too much empty space.

You can also fine-tune spacing for any individual block.

Select the block, open the Settings panel on the right, and look for the Margin or Padding options under “Dimensions.” This lets you add or remove space inside or outside each block for more precise control.

If you ever notice inconsistent spacing, open the List View panel. It shows every block on your page, making it easy to spot duplicate Spacer blocks or gaps that need adjustment.

When everything looks balanced, click Update to save your changes. Always preview your page on both desktop and mobile to make sure the spacing feels natural across all devices.

Add or Remove Space Between Blocks with Custom CSS

If you want more precise control over spacing, you can use custom CSS to set exact margin or padding values for your blocks. This method takes a little more setup, but it gives you pixel-perfect results that apply site-wide.

Start by selecting the block you want to adjust in the editor. In the right-hand sidebar, open the Advanced section and look for the field labeled Additional CSS Classes.

Here, you can assign a custom class name, like custom-spacing.

Next, go to Appearance » Customize » Additional CSS in your WordPress dashboard.

This option only appears on themes that don’t use the new Site Editor (FSE). If your theme includes the Site Editor, you can instead add your CSS using a plugin like WPCode

In the CSS editor, enter a simple rule like this:

.custom-spacing { margin-bottom: 20px; }

This example adds 20 pixels of space below any block with that class. To remove spacing entirely, change the value to 0 instead. You can experiment with different values to get the spacing just right for your layout.

When you’re finished, click Publish to save your changes. If you use caching plugins, clear your cache afterward to make sure the new styles appear correctly.

Custom CSS is ideal when you need exact spacing for specific elements, but for most users, the visual options in SeedProd or the block editor are faster and easier.

Best Practices for WordPress Block Spacing

Once you understand how spacing works in WordPress, it’s worth taking a few extra minutes to make it look consistent across your pages. Good white space isn’t about using the same amount everywhere, it’s about creating balance so your content feels easy to read and visually connected.

  • Keep spacing consistent. Use similar gaps between related sections, like text and images, to make your design feel intentional.
  • Use more space for key areas. CTAs, testimonials, and featured sections stand out more when surrounded by extra white space.
  • Tighten grouped elements. Inside columns or content boxes, reduce margins and padding to keep elements visually linked.
  • Preview on all devices. A layout that looks perfect on desktop might feel too cramped or too loose on mobile. Always check the mobile preview.
  • Remember margin vs. padding. Margin adds space outside a block, while padding adds space inside it. Adjust each based on your layout needs.
  • Stay proportional. As a general rule, use 40–60px between major sections and smaller gaps within grouped content.

By keeping your spacing intentional and consistent, your pages will feel polished, professional, and easier to read.

FAQs About WordPress Block Spacing

Here are some quick answers to common questions about adding or removing space between blocks in WordPress.

What’s the difference between margin and padding in WordPress?
Margin controls the space outside a block, while padding controls the space inside it. Margins affect how close blocks sit next to each other, and padding affects the distance between a block’s content and its border.
Why does my site have too much white space between blocks?
This usually happens because your theme adds default margins or padding. You can reduce them in the block’s Dimensions settings, adjust global spacing in the Styles → Layout panel, or fine-tune spacing with custom CSS.
Can I change spacing without using code?
Yes. You can use SeedProd or the built-in Spacer block in the WordPress editor to adjust spacing visually without writing any CSS.
Does WordPress spacing affect SEO?
Not directly, but clean layouts improve readability and user experience. The easier your pages are to read and navigate, the more likely visitors are to stay longer — which can indirectly support better engagement signals.

Getting your white space right can completely change how your website feels. When your content has room to breathe, it’s easier to read and looks more polished overall.

Whether you’re using the block editor, adding a little CSS, or building pages visually with SeedProd, the key is consistency. Once you find spacing values that feel balanced, stick with them across your site to create a cohesive experience for visitors.

If you’d like to keep improving your layouts, here are a few helpful guides to explore next:

Thanks for reading! We’d love to hear your thoughts, so please feel free to join the conversation on YouTubeX and Facebook for more helpful advice and content to grow your business.

author avatar
Stacey Corrin Writer
Stacey has been writing about WordPress and digital marketing for over 10 years and on other topics for much longer. Alongside this, she's fascinated with web design, user experience, and SEO.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.