WordPress’s Block Editor makes it incredibly easy to create beautiful pages. However, it still has 1 critical flaw. It does not allow you to manages spaces between blocks effectively.
In this video, I’m going to tackle that problem and show you exactly how to add, remove, and manage spaces between WordPress blocks.
⚡Use Promo Code WPBVIP⚡
►Best WordPress Contact Form Plugin https://wpforms.com/wpbeginner
►Best WordPress Analytics Plugin https://www.monsterinsights.com/
►Best Lead Generation Plugin https://optinmonster.com/
►Best WordPress SEO Plugin
https://aioseo.com/
►Best Theme Builder for WordPress https://www.seedprod.com/
Related Videos
►WordPress Tutorial – How to Make a WordPress Website for Beginners https://www.youtube.com/watch?v=DvbFBxKcORA
►WordPress Gutenberg Tutorial: How to Easily Work With the Block Editor https://www.youtube.com/watch?v=JjfrzGeB5_g
►What is SEO and How Does it Work? https://www.youtube.com/watch?v=JjfrzGeB5_g
►How to Install a WordPress Theme https://www.youtube.com/watch?v=ZIPQRQLAz90
If you liked this video, then please Like and consider subscribing to our channel for more WordPress videos.
https://www.youtube.com/subscription_center?add_user=wpbeginner
Follow us on Twitter:
https://twitter.com/wpbeginner
Check out our website for more WordPress Tutorials
https://www.wpbeginner.com/
#WPBeginner #WordPress #WordPressTutorial
So you want to learn how to add or Remove the empty spaces between blocks On your WordPress website let me show You how it works to demonstrate how I've Done this I've created a simple page With two images One image here and one Image here now let's say if I want to Add additional spacing between those two Images what most beginners would do is Go here and add a paragraph block let's Say insert after paragraph and just Select the paragraph block and Add a few spaces right and then you Update the post and you hope that the Spacing will actually appear let's check The post out I haven't refreshed it so Let me refresh And the page has reloaded and nothing Changes the spacing did not appear why Because paragraph log does not help in This case all these blocks are not Useful so how do you actually add space Between blocks there's a simple way let Me just first remove these paragraph Blocks which are not helpful I'll just use the keyboard shortcut To quickly remove these blocks And the last one also is done now if you Want to increase the spacing between two Blocks you don't have to add a paragraph Block you have to add a special block Which is called the spacer block let me Demonstrate what I'll do is again use The navigation option I'll click and say
Hey add after or insert after and in the Block instead of a paragraph what I'll Do is just type in forward slash and Type in SVA and you see the spacer block Come up I'll select the spacer block I'll close this menu and now the spacer Block I'll just open these settings up And now you see the spacer block has Simple setting how much height do you Want to add between two images so right Now it's set to 100 pixels let's say I Set it to 50 pixels you see the spacer Block will immediately change and Reflect on the screen if I make it 150 Let's say let me just type it in This spacer block will immediately Increase in size but what if you don't Want to use the pixels right here you Can also click and choose different uh Various ways of measuring the distance But the easiest way I think is they just Select and drag a little bit and this Will give you an idea on screen that how Much space you are adding right between Two blocks so let's say I was happy with Somewhere around 124 pixels I'll update The post I'll go to this page I'll refresh it Once again And now you see the space has actually Changed and just to give you a Demonstration if I just make it really Large I've saved the post I quickly go Back I refresh and the spacing will
Increase so that's how you add spacing Between two blocks using the spacer Block but what if you want to remove or Reduce or completely eliminate the space Between two blocks will this spacer Block help in that case can we try it Let's take an example let's try it out What if I do minus 25 or minus 20 let's Try it out pixels Refresh And it does help but I don't think it Removed the entire space let's try Negative of 100 or something let's let's Select the spacer block and again you Can see instantly that if when I tried a Negative value the space of spacer block Defaults to the default value which is Zero so to summarize you can add more Space between blocks using the spacer Block but you cannot take space away or Reduce space between two blocks using The spacer block now you might be asking Your Raj I want to learn how to remove The space between or eliminate the space Between two blocks how do I do that well The simple answer to that is c s s yes We're going to work with CSS or Cascading style sheets to quickly remove Or I'll teach you how to quickly remove Spaces between two blocks and don't Worry it might sound intimidating we are Going to mess with a little bit of code But it's completely safe and it's not Going to mess up your site and it's very
Easy to understand if you just keep an Open mind all right let me show you how It's done so first what I'll do is Instead of going to the post I'll go to My customizer so I'll go to appearance I'll go to customize which will open Update customizer on the site and inside The customizer you'll see additional CSS Options right here what I'm what we're Going to do in essence is and a new CSS Class on the website and then use that Class to remove the space between two Blocks I'll explain when we actually Type in the code so let me click Additional CSS And this is the segment for additional CSS or where you can type in additional CSS now I'm going to type a piece of Code here and I'm going to explain what It actually means so that you don't feel Overwhelmed you don't see you don't feel That this is too complex to understand I'll explain everything so I'll type it In Type in Dot remove Hyphen Bottom Space Zero Space curly brackets enter So the code is not complete yet but just Wanted to highlight what I'm doing I'm Defining a new CSS class the dot in the Beginning represents that this is a
Class and this is the name of the class Remove bottom space zero this is the Name of the class which we'll use to Reference this class you can name it Anything else but having a descriptive Name makes it easier for you to remember Why this class was added in the first Place right so right now Define the Class but what the what will the class Do if I attach this class to a Particular element what needs to happen Let me Define that here I'll type it in I'll type in margin And you can see suggestions come up Already on the screen or in bottom Colon space zero Semicolon So now let me explain once again what I've done I've just added a value or a Property to this class and this class is Saying that whenever this class is added To a particular element make sure the Bottom margin the margin on the bottom Is set to zero all right right now again You might be thinking hey I want to Reduce the margin the side or the top How do I do that I'll explain everything Right now just take this as an example And let your brain run wild with Creativity okay so I'll publish this Right now also what I do is copy this Name of the class without the dot okay Without the dot this is important I'll Copy it
I'll go back to the post which I'm Working with right now same post exactly And what I'm going to do is right now You might be thinking where did the Space go because I haven't selected the Block as soon as I select the block the Spacing will appear for the caption what I'm going to do is select the block go To block settings so on the right hand Side you can see the blouse settings Scroll to the bottom you'll see advanced You see title attribute HTML anchor and Additional CSS classes exactly what we Did we created a new CSS class and this Is a WordPress feature you write a CSS Class and just specify that you want This class to be attached to a certain Object in this case this image block and Just to clarify this works with image Blocks paragraph blocks every block has The same feature so it doesn't matter if Your image using images or paragraph I Just type in the name of the CSS class Here And save my post right so I'll save the Post And now nothing changed here and if I go To the actual preview without refreshing You'll see nothing changed here as well The spacing is still present but let me Refresh the page Ctrl r And instantly see the margin has been Reduced to zero because now the CSS Class is doing its magic and the CSS
Class is very simple to understand as I Showed you remove bottom space I just Named it I added a property bottom Margin is set to zero and just that's it Very simple to understand but now you Might be thinking IRAs this looks even Uglier because now there's no spacing in Between the blocks I won't have it just A small margin not the big margin that Was present earlier just a small bit of Margin well yes you can do that and I'll Tell you a creative way to manage this On your site instead of just telling you How to add a small margin I'll tell you The options of creating or having any Kind of margin that you you can use Throughout the site for different Scenarios let's go back to the custom CSS options And what we're going to do is copy the Entire code here once again Just press enter one more time so one Blank line paste it again So I'll just copied paste to the entire Same code but what I'm going to do is Change two things I'm going to change The name of the class so instead of 0 I'm going to name it 5. And instead of margin bottom as 0 I'm Going to name it 5 as well So what I've done let me explain I've Created a class here which we already Used but I've created another class with The name is different right so remove
Bottom space 0 and remove a bottom space Five so in the class which says or with The name is five the bottom margin is Actually set to 5 not 0. so now let's Save it Go back to the post let's change the CSS Class from 0 To 5. Let's update the post I'll go here page is not refreshed yet Let me refresh it And instantly five pixels is now added As a margin pretty awesome right so now What you can do is instead of just Settling with zero margins or zero uh Say space between blocks you can just Create copies of this class so let's say You want to have one more class which Has 10 pixels right right you can just Copy this or seven pixels just make a Couple of copies and then whenever you Want to utilize this class just remember The name of the class add to a Particular block and the margin will be Reduced and if you want to change the Property from bottom to top because Right now we are working on an image Which is here and the next image is on The bottom but let's say you want to Work with an image like this where There's nothing on top you just want to Reduce the margin just change this Property from margin bottom to margin Top technique it works with left and
Right as well so you can experiment and Work around it so you can just work with This and create multiple copies of this And just name it differently so instead Of let's say if I want to work with the Margin on top I'll rename the class to Remove top margin or top space and then 0 5 and then just reduce the number of Pixels I want or change change the Problem is and that way I'll have just Simple classes that I can copy and paste Go to a single element on the website Add that class and then the spacing will Be managed automatically now of course You need maybe just a couple of Variations because if you want to add More space you can already do that with The spacer block this is just for Removing the space or removing the space Which is less than default of what WordPress already offers you in between Blocks so that's how you do it very Simple very simple to understand and of Course if you still feel overwhelmed you Feel okay this is not complex or this is Not something that you can do again it's Very easy I probably I'm not a developer I'm not a designer I can understand and Try to explain it the easiest way Possible so still have questions about This you can leave that in the comments Right now on the Block editor this is How you reduce or add spacing between Blocks that's completely done but what
About page Builders right you can use Page Builders as well so let me explain How to add or remove spacing between Blocks when you're using a page builder So let's try to add or remove spacing Between blocks when we are using a page Builder in this case I'm using seat plot But I believe every page builder on the Market has the same functionality the Interface might be a little different You can figure it out yourself it's not Very complex so let's say I'm working With this section right here or not our New website is on the way let's say I Want to increase the spacing between This headline and this block there are a Couple of ways to do it but the easiest Way again is using the spacer block I Can take the spacer block add it between The blocks and now I can just customize This spacer block by clicking it and now I have the height option here I can Change this and the space block works It's very easy the other method is to Change the margins again what we did in The CSS class is just we defined a hard Coded margin but because we are using a Page builder you can do that visually so I can click here Go to the advanced tab Spacing And spacing defines margins already so You can see the top margin has already Been defined as 91 pixels we have the
Right margin we have the bottom margin And we have the left margin what if I Want to increase the spacing between These and the headline below it the Bottom margin will help right so what I Can do is just click click click and you Might not see it immediately so let me Just take a big number and type it in 25 Now instantly see the spacing is being Affected so if I want to do 50 I can do That as well now what if I want to Reduce the space well here's the best Part you can use negative values as well At least in C plot Different Page Builders have different I say Workarounds to this so let's say if I Want to reduce the spacing between the Blocks by negative 10 pixels from what The default one was let's type in Negative 10. you see the spacing is now Getting reduced and I'll just give you a Quick demonstration I'll just reduce the Spacing even further I can literally do This that I can overlay both them on top And sometimes this is a desired effect Of course not with tech but sometimes You have overlapping images you want to Create a specific effect this is where You actually achieve it so let's say I Want just just to keep it reasonable I'll just make it negative 10 pixels and Just click and click somewhere else now You see it looks a little tighter the Spacing has been reduced between both
Blocks and so easy to do right there's No complicated stuff to do that's what Seed plot can do for you so if you're Looking to create pages with a page Builder Choose Street plot if you're Already working with a classic editor And you still wanted to understand how To reduce the spacing between blocks Then I just demonstrated how to do it With very simple CSS nothing to worry About it is very very safe on your site It won't break your site unless you Actually take that class and apply to Something else it won't hurt any other Or it won't change anything else on the Site it's very safe to use all right I Hope you enjoyed this if you like this Tutorial make sure hit the like button And if you enjoy learning about WordPress simple too easy easy to follow Along tutorials about WordPress then Make sure to subscribe to this channel As well my name is yuvraj you're Watching WP beginner I'll catch you in The next video very soon take care
