WordPress blocks can be styled in many ways. They can have different backgrounds, borders, padding, text alignments, and fonts. They can also be set apart by blank space. This article discusses the options available and how to add and remove blank space between blocks.
Blank space between blocks is common in WordPress. Many websites have a block of text on the left side and right side of the page. However, the right side of the page sometimes gets too wide. When you add new block content to a page, it appears in a blank area below the previous block content. This can result in a lot of white space between blocks. It’s easy to remove the blank space by changing the CSS properties.
Why Add or Remove Blank Space Between WordPress?
A lot of times when you create a website, you will see that the blocks on your page are too close together. You might think that this makes your site look unprofessional or cluttered. But in fact, a lot of people use the blank space to make their site look more organized.
When you add blank space between your blocks, you have a choice. You can either keep the spacing so that your site looks pretty neat and organized, or you can take away the spacing so that your blocks are closer together.
When you add or remove blank space between WordPress blocks, you change the visual appearance of your site. You also change what happens when someone clicks on links inside of your website’s posts.
Some websites have different blocks on each side of the page. For example, a menu block might be on the left and a sidebar might be on the right. To help visitors understand where the content goes, there should be some space between the blocks. This helps make the website look neat and organized.
There are two reasons why adding or removing blank space between WordPress blocks makes the page look nicer.
- When you add blank space, it makes the blocks of content look closer together.
- When you remove blank space, it makes the blocks of content look farther apart.
Now let’s see 4 ways of adding or removing blank space between WordPress blocks
1. Adding blank space with WordPress block editor
2. Add or Remove blank space by adding code to WordPress
3. Add or Remove blank space with CSS Hero
4. Add or Remove blank space with SeedProd
- Adding blank space with WordPress block editor
One of the easiest ways to add blank space between blocks is by using the WordPress block editor. The block editor is a text-based block editor. It’s used to create blocks like the ones used in your website.
To make a block on the page more readable, we often add blank space between blocks. This helps to make the page easier to read. The blank space is added when we use the tag.
There is a built-in function for blank space with just a few clicks. In order to use this function open a page or post to edit and click the ‘+’ add block button and then search for ‘Spacer’ and then select the block.
Clicking on it will automatically insert the spacer into the page.
Then by dragging the block up or down you can make it big or small.
Once done click the ‘Update’ button to save your changes.
Note: Using this method you will be able to only add blank spaces. In order to add or remove blank space just follow the below methods.
- Add or Remove blank space between WordPress blocks by adding custom CSS code
Another method to add or remove blank space between blocks is by adding code.
First of all, open a post or page that you want to edit and click the block where you want to add or remove blank space.
Then in the right-hand options panel, you will find the ‘Block’ menu, click on the menu.
Then just scroll down and click the ‘Advanced Tab’ drop-down menu. This will give you a set of advanced options for the block.
Next in the ‘Additional CSS Classes’ box add the below code:
.add-remove-bottom-space
This code will create a new CSS class for the block.
After that click the ‘Update’ button to save all your changes.
Adding custom CSS to the WordPress theme customizer
Then move to Apperance>>Customize to pull the WordPress theme customizer.
Then you have to scroll down and click the ‘Additional CSS’ option.
This will pull the fields where you want to add the code.
Next paste the following code in the box:
.add-remove-bottom-space {
margin-bottom: 0;
}
The above code sets the bottom margin to zero, in that case, it will remove the blank space at the bottom. If you want blank space at the bottom then you can just change ‘0’ to 15px.
Once done click the ‘Publish’ button in order to make it live.
Adding custom CSS using a plugin
If you add custom CSS to a WordPress theme, it will only save it in a theme that is currently in use. If you change the theme, then again you have to copy the code and paste it into the new theme.
Suppose you want your custom CSS to be applied even if you change the theme, then it’s better to apply using the Simple Custom CSS plugin.
Initially, install and activate the Simple Custom CSS plugin.
Once activated move to Apperance>>Custom CSS to add your CSS code.
Once done, click the ‘Update Custom CSS’ button in order to save your changes.
- Add or Remove blank space between WordPress blocks using CSS Hero Plugin
With CSS Hero Plugin, you can easily add or remove the blank space between blocks by using CSS. This plugin is very useful for web designers who work on multiple websites.CSS Hero Plugin will save you a lot of time when you have to apply CSS for various elements on multiple websites and pages. This plugin removes the blank space between WordPress blocks (images, video, post text, etc). You can use the plugin with any theme or you can use it without a theme at all. It works on all browsers and devices. It can be used with any content type.
This plugin lets you make your visual changes without touching a single piece of CSS Code. You can almost edit any CSS style without a single piece of code.
Initially install and activate the CSS Hero plugin.
In order to activate your plugin, click the ‘Proceed to Product Activation’ button.
Clicking on the button will lead you to the screen, to enter your username and password. Then follow the instruction as per the on-screen, and will direct you to the dashboard once the account is verified.
Now open a post or page you want to edit and click the ‘CSS Hero’ button at the top of the page.
Clicking on the button will lead you to the same page by running CSS Hero. This plugin uses a visual editor, so you can see your changes live.
If you click any element on the page, a toolbar will appear on the left for customization.
In order to add or remove blank space, click the ‘Spacing’ option from the toolbar and then scroll down to the ‘Margin-Bottom’ section.
Here you can adjust the slider to add or remove blank spaces.
Changes made will be visible on the page. Once done click the ‘Save’ button to make your changes live.
- Add or Remove blank space between WordPress with SeedProd
SeedProd Page Builder is a drag-and-drop page builder that can be used for any kind of website. It is very simple and easy to use with many features. The best thing about it is that you don’t have to learn a complicated coding language or spend hours finding the right tool. You can get started with just a few clicks. With SeedProd, you will be able to customize your own web pages and easily update them whenever you want. In addition, it supports all the standard functionalities such as galleries, contact forms, testimonials, maps, videos, social media, and more. Using this builder, you can even create a custom WordPress theme without touching a single piece of code.
Using this builder, when you customize your page you can easily add or remove blank space by the ‘Spacer’ option.
Simply drag and drop the option where to want to add space between blocks and you can use the slider to adjust the height.
You can even control the spacing between any blocks. In order to do so, click any block that you want to add or remove space.
Then click the ‘Advanced’ Tab on the left side.
Then click on the ‘Spacing’ option from the dropdown. This will give you the control over the ‘Margin’ option where you can enter a number in the bottom margin box to add space or just delete the number to remove the space.
Once everything is done, click the ‘Save’ and ‘Publish’ buttons to make your changes live.
Conclusion
Hope you got an idea of several ways of adding or removing blank space between WordPress blocks. If you have any queries or suggestions, please feel free to comment. Your comments are much needed to improve your blog.