Thank you so very much for these tips! This caused me a lot of problems as a newbie. There are a few things I would like to add: - For wordpress v6.2.2 put the css is in: Dashboard -> Design-> Website Editor -> Styles [the black/white circle button when editing templates] -> Additional Css - Depending on the theme (for example in twenty-three) it is necessary to prioritize conflicting css properties, this means to use: margin-top: 0 !important; - Use F12 in Chrome and select your block and see which block's margin is causing the trouble. - Consider setting the spacing between blocks property (in styles -> layout) to 0 and edit the layout properties of the block types (style-> blocks).
Although, upon attempting this it did not work with wordpress 6.6.2 with 2024 theme. It did not work if I made it zero or fifty pixels. The Additional CSS has moved, and unless mine is broken, does not autocomplete as shown here. And the block editor does not allow negative spacing.
I really enjoy some of your videos. I have a question though: Where (or how) do you suggest I can create (or others by paying) a custom wordpress theme ?? Are any tools I can use to create one?? Thanks!
If it is for your site then we have a guide below that you should find helpful: www.wpbeginner.com/wp-themes/how-to-easily-create-a-custom-wordpress-theme/
Thank you! Is there a way of removing the spacing between blocks in the backend editor as well (like you did at 5:44). I prefer creating my sites with my sections directly against eachother (no space between them). But it's very frustrating because the editor isn't WYSIWYG so I have to keep opening the frontend to see things without the margins. Can we apply the same "fix" to the editor somehow?
Thank you for this tutorial! I'm new to Wordpress and learning a lot this way. I'm not afraid to try things also when it comes to code writing. Again, I am new to all of this, hehe. But wauw, so many questions but also so many possibility's!! :)
@@wpbeginner I really would like remove the background colour, transparent, now it's black and in front of my picture. Do you also have a tutorial regarding that?
Great video. I do have one question. The spacings between all my images are exactly the same. However, if I add a column, then the spacing under the column is wider. Is there a way of reducing the spacing under columns? I really appreciate any help you can provide.
Thank you for your clear explanation. I appreciate the demonstrations you make to help understand what the incorrect way does. I am struggling with a footer, and unfortunately, your solution does not work. The inspector tool F12 shows the culprit, namely "margin-block-start: 1.5rem;" How can I reduce it? Customizer seems to not recognize margin-block-start in CSS code. (using twenty-twentytwo theme). Thanks
If your theme is not allowing the CSS customization, you could try adding !important to the end of your custom css to see if that allows the code you are using to replace it to work.
@@wpbeginner Thank you so much for your reply! Adding !important does not make a difference. What I mean is that "margin-block-start" is not recognized as a property, since it shows up in red.
Hello, My name is Humphrey. Thank you very much for this video. I have followed it and reduced spacing between images in my blog post which worked very well. However, I still have one challenge. The wide blank spaces between image blocks on the MAIN SIDEBAR were not reduced but remained the same. Please can you show me how I can reduce spaces between image blocks on the main sidebar? Thank you very much.
The sidebar normally has styling that would require CSS changes. We would recommend using our guide below for how to use inspect element and that would allow you to find what needs to be reduced for the spacing. www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Your theme may be using a custom interface, if you have not done so already we would recommend reaching out to the support for your specific theme and they should be able to assist!
I tried this on two group blocks (both containing columns) that were next to each other with no success. I can tell there is still a space, because the groups have a background color. There is no spacer block (or any other block between them). Do I need additional CSS when trying to get rid of spacing between group blocks? Thanks.
It can depend on your theme but more than likely your group blocks have slightly different CSS that you would need to modify. You can check the CSS for your blocks using Inspect element and we cover how to use that in our article below! www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
This may not be the right place to ask this question but here goes: We have a literary blog and our posts are short stories or poems. I paste text into a post with spaces between all paragraphs, and those spaces disappear. The paragraphs all run together. I've inserted spacer blocks, but that is cumbersome as I have to insert them between every paragraph. There must be a more elegant way to preserve spaces between paragraphs. I would very much appreciate help with this nagging issue.
So weird. I have the classes in like. you do and they show up when I inspect the page, but the blocks still have a margin of either top or bottom still applied. Even though I can see the class name that we created added to the block.
There may be some CSS overriding what you are adding, we would recommend trying Inspect Element using our guide below to help test for this. www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Did your theme change and start using the full site editor? If that is the case under Appearance you would see Editor. If not then you would want to ensure you are an admin user on your site.
how to strech section/container to full width, I've tried all methods, elementor full-width, width 100% and also checked page code, but couldn't resolve the issue. please help
It is difficult to say without viewing your site directly, you can get a better idea on what is causing the extra space using inspect element following our guide below! www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
For the time being the block editor would require a new block for the content. You may want to look into the classic editor for the type of editing that you want.
Your theme may be a full site editor theme. We would recommend taking a look at our article below: www.wpbeginner.com/beginners-guide/how-to-fix-missing-appearance-menu-in-wordpress-admin/
If none of the methods we mention in this guide work for you, we would recommend reaching out to the support for your theme as the theme's styling would likely be overriding what you are setting.
Hi, thanks a lot! But it didn't work on the column block of my site (Astra Theme). Kindly give some suggestions if possible. Update: The !important property solved the problem. Many many thanks to @f.libaax7408!
Thank you so very much for these tips! This caused me a lot of problems as a newbie.
There are a few things I would like to add:
- For wordpress v6.2.2 put the css is in: Dashboard -> Design-> Website Editor -> Styles [the black/white circle button when editing templates] -> Additional Css
- Depending on the theme (for example in twenty-three) it is necessary to prioritize conflicting css properties, this means to use: margin-top: 0 !important;
- Use F12 in Chrome and select your block and see which block's margin is causing the trouble.
- Consider setting the spacing between blocks property (in styles -> layout) to 0 and edit the layout properties of the block types (style-> blocks).
what about in Zoologist theme? I am so frustrated right now
As someone who hates computers, this tutorial is so well done that even I can follow it. Fantastic job.
Glad to hear! We hope our guides continue to be helpful for you :)
Your tutorial is straightforward and very to easy to follow. Thanks a lot!
Glad to hear!
I love how you teach your videos! Thank you, Sir.
Glad you like it :)
Wonderful, so helpful! Just the advice I was after and explained brilliantly, thank you so much!
You're welcome! Glad our video was helpful :)
That was exactly what I was looking for. Thank You!
You're welcome, glad our guide could assist!
Excellent teaching.... thank you !
Glad it was helpful!
That was great, thank you friend
Glad you found it useful! :)
Although, upon attempting this it did not work with wordpress 6.6.2 with 2024 theme. It did not work if I made it zero or fifty pixels. The Additional CSS has moved, and unless mine is broken, does not autocomplete as shown here. And the block editor does not allow negative spacing.
Wonderful! Any thoughts on why I have too much space between an image and a text block on mobile only?
It is likely a CSS issue with your theme's mobile styling, If you check with your theme's support they can normally let you know the CSS to change.
@@wpbeginner Thank you so much!
@@wpbeginner Actually, I'm not sure I have a theme per say. I use WP blog in conjuction with SHOWIT.
I really enjoy some of your videos. I have a question though: Where (or how) do you suggest I can create (or others by paying) a custom wordpress theme ??
Are any tools I can use to create one?? Thanks!
If it is for your site then we have a guide below that you should find helpful:
www.wpbeginner.com/wp-themes/how-to-easily-create-a-custom-wordpress-theme/
This is awesome! Thank you for sharing!
You're welcome, glad you found it helpful!
Thank you! Is there a way of removing the spacing between blocks in the backend editor as well (like you did at 5:44). I prefer creating my sites with my sections directly against eachother (no space between them). But it's very frustrating because the editor isn't WYSIWYG so I have to keep opening the frontend to see things without the margins. Can we apply the same "fix" to the editor somehow?
For the moment we do not have an easy CSS solution
great presentation style, thank you 👍
Glad you liked it :)
Thank you for this tutorial! I'm new to Wordpress and learning a lot this way. I'm not afraid to try things also when it comes to code writing. Again, I am new to all of this, hehe. But wauw, so many questions but also so many possibility's!! :)
Glad our guide was helpful!
@@wpbeginner I really would like remove the background colour, transparent, now it's black and in front of my picture. Do you also have a tutorial regarding that?
Great video. I do have one question. The spacings between all my images are exactly the same. However, if I add a column, then the spacing under the column is wider. Is there a way of reducing the spacing under columns? I really appreciate any help you can provide.
You should be able to follow the method from this article to reduce the spacing after your columns as well
Thank you for your clear explanation. I appreciate the demonstrations you make to help understand what the incorrect way does. I am struggling with a footer, and unfortunately, your solution does not work. The inspector tool F12 shows the culprit, namely "margin-block-start: 1.5rem;" How can I reduce it? Customizer seems to not recognize margin-block-start in CSS code. (using twenty-twentytwo theme). Thanks
If your theme is not allowing the CSS customization, you could try adding !important to the end of your custom css to see if that allows the code you are using to replace it to work.
@@wpbeginner Thank you so much for your reply! Adding !important does not make a difference. What I mean is that "margin-block-start" is not recognized as a property, since it shows up in red.
THANK YOU SO MUCH ! I used to write a dot to give space between blocks hahaha
Glad we could give a good alternative :)
Hello, My name is Humphrey. Thank you very much for this video. I have followed it and reduced spacing between images in my blog post which worked very well. However, I still have one challenge. The wide blank spaces between image blocks on the MAIN SIDEBAR were not reduced but remained the same. Please can you show me how I can reduce spaces between image blocks on the main sidebar? Thank you very much.
The sidebar normally has styling that would require CSS changes. We would recommend using our guide below for how to use inspect element and that would allow you to find what needs to be reduced for the spacing.
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Thank you so much!!!!
You're welcome!
Great tutorial - one problem, customizer is not there.
Your theme may be using a custom interface, if you have not done so already we would recommend reaching out to the support for your specific theme and they should be able to assist!
That was fantastic
Thank you!
I tried this on two group blocks (both containing columns) that were next to each other with no success. I can tell there is still a space, because the groups have a background color. There is no spacer block (or any other block between them). Do I need additional CSS when trying to get rid of spacing between group blocks? Thanks.
It can depend on your theme but more than likely your group blocks have slightly different CSS that you would need to modify. You can check the CSS for your blocks using Inspect element and we cover how to use that in our article below!
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
This may not be the right place to ask this question but here goes: We have a literary blog and our posts are short stories or poems. I paste text into a post with spaces between all paragraphs, and those spaces disappear. The paragraphs all run together. I've inserted spacer blocks, but that is cumbersome as I have to insert them between every paragraph. There must be a more elegant way to preserve spaces between paragraphs. I would very much appreciate help with this nagging issue.
If you use Shift+Enter that should allow you to add space between your text while keeping the same paragraph block.
😊 Thank you!
You’re welcome!
Thanks a lot!
You're welcome!
I don't get the same interface during editing how can I get one in your video
Ours is the current default block editor, if you're not seeing it then either your theme or a plugin on your site is likely overriding the editor.
Thanks!!
You're welcome!
So weird. I have the classes in like. you do and they show up when I inspect the page, but the blocks still have a margin of either top or bottom still applied. Even though I can see the class name that we created added to the block.
There may be some CSS overriding what you are adding, we would recommend trying Inspect Element using our guide below to help test for this.
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Cant find the customizer button, pleas help! What should i do? It just disappeared
Did your theme change and start using the full site editor? If that is the case under Appearance you would see Editor. If not then you would want to ensure you are an admin user on your site.
how to strech section/container to full width, I've tried all methods, elementor full-width, width 100% and also checked page code, but couldn't resolve the issue. please help
For Elementor, we would recommend reaching out to Elementor's support and they would be able to assist.
@@wpbeginner elementor only give feedback to pro users, I mailed them the issue.
Hi, I followed all the steps but it did not work. I'm struggling to figure out why it isn't working.
It is difficult to say without viewing your site directly, you can get a better idea on what is causing the extra space using inspect element following our guide below!
www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
thank you
You're welcome
I want to know how not to create seperate blocks between Paragraph and its heading simply by pressing ENTER key
It's so annoying
For the time being the block editor would require a new block for the content. You may want to look into the classic editor for the type of editing that you want.
Not able to see the same sub menu Appearance>Customize in my installation.
Your theme may be a full site editor theme. We would recommend taking a look at our article below:
www.wpbeginner.com/beginners-guide/how-to-fix-missing-appearance-menu-in-wordpress-admin/
@@wpbeginner Thank you for your reply
Did not work for me
If none of the methods we mention in this guide work for you, we would recommend reaching out to the support for your theme as the theme's styling would likely be overriding what you are setting.
Lost me at CSS Class....LOL
Haha, I don't understand much CSS myself, so if I could do it, you can too.
-- Yuvraj, the person in the video. :)
Hi, thanks a lot! But it didn't work on the column block of my site (Astra Theme). Kindly give some suggestions if possible.
Update: The !important property solved the problem. Many many thanks to @f.libaax7408!
Glad to hear that solved the issue for you!