How to Add or Remove Blank Space Between WordPress Blocks (4 Ways)

0 0
Read Time:4 Minute, 20 Second

Do you want to add or remove blank space between WordPress blocks?

Adding or removing blank space between your WordPress blocks gives you more control over the design of your WordPress site.

In this article, we’ll show you how to add or remove blank space between WordPress blocks, step by step.

However, you may notice that when you add certain blocks, there’s too much or too little spacing. By adding or removing blank space between your WordPress blocks, you can create custom page layouts exactly as you’d like.

That being said, let’s take a look at how to add or remove blank space between WordPress blocks on your website. Simply use the quick links below to jump straight to the method you want to use.

The easiest way to add blank space between your blocks is using the WordPress block editor. There’s a built-in spacing block that lets you add blank space with a couple of clicks.

Then, search for ‘Spacer’ and select the block.

This will automatically insert a spacer into the page. 

You can make it bigger or smaller by dragging the block up or down.

Once you’re finished, click the ‘Update’ button to save your changes.

Keep in mind, this method only allows you to add space between blocks. To remove space, you will need to use one of the other methods below.

Another way to both add and remove blank space between your blocks is by adding custom CSS code to your theme.

Next, open up the page or post you want to edit and then click on the block where you want to add or remove the blank space.

Then, click the ‘Block’ menu item in the right hand options panel.

After that, scroll down to the ‘Advanced’ drop down and click it. This brings up a set of additional options for that block.

Then, in the ‘Additional CSS classes’ box add the following code:

This snippet creates a new CSS class specifically for that block. 

After that, click the ‘Update’ button to save your changes.

Then, scroll down and click the ‘Additional CSS’ menu option.

This brings up a field where you can add CSS code.

Next, paste the following code snippet into the box.

This code snippet sets the bottom margin to zero and will remove the blank space from the block. If you want to add space to the bottom, then simply change the ‘0’ to something like ’20px’.

Once you’ve made your changes, make sure to click the ‘Publish’ button to make your changes live. 

Saving Custom CSS Code Using a Plugin

Upon activation, simply go to Appearance » Custom CSS and add your custom CSS code.

When you’re finished, click the ‘Update Custom CSS’ button to save your changes.

Upon activation, you need to click the ‘Proceed to Product Activation’ button to activate the plugin. You’ll find the button directly above your list of installed plugins.

This brings you to a screen where you need to enter your username and password. Then, follow the on-screen instructions, and you’ll be redirected back to your dashboard once your account is verified.

Next, you need to open up the page or post you want to edit, then click the ‘CSS Hero’ button at the top of your WordPress admin toolbar.

This will open up the same page with CSS Hero running on top of it. The plugin uses a visual editor, so you’ll be able to make your changes in real-time.

When you click on any element on your page, it will bring up a toolbar on the left side of the page for you to make customizations.

To remove or add blank space between your blocks, simply click the ‘Spacings’ option and then scroll down to the ‘Margin-Bottom’ section.

Here you can move the slider up or down to add or remove blank space.

Any changes you make will automatically show up on your page.

Once you’re done making changes, you need to click the ‘Save’ button to make your changes live. 

With the drag and drop builder, you have full control over the design of your site, and you can easily remove or add spacing to any website element.

As you’re customizing your page, you can add space anywhere by using the Spacer block.

Simply drag and drop it anywhere on the page where you want to add more space between blocks.

Then you can use the slider to adjust its height.

You can also control the spacing between any block. To do that, simply click on any block that you want to add or remove space from.

This brings up the options panel on the left. Then, click on the ‘Advanced’ tab.

Next, scroll down to the ‘Spacing’ drop down and click it.

This brings up a menu where you can control the ‘Margin’. Simply enter a number into the bottom margin box to add space, or delete the number to remove any existing blank space.

Once you’re finished making changes, click the ‘Save’ button and select the ‘Publish’ drop down to make your changes live.

source

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Previous post As ApeCoin goes bananas, Bored Ape Yacht Club plots one metaverse to rule them all
Next post NASA Confirms 5,000 Exoplanets Beyond Our Solar System: Each a 'New World'

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published.