Increase and Decrease Spacing Before and After Heading in Blog Post Using CSS

Hello everyone. 

I posted this before and didn't quite get the answer I wanted. I want to increase or decrease the spacing on a heading in a blog post. I want to play with it until I get what I like. I've attached a screenshot with red arrows to show you experts what I'm talking about.

In the original post, someone responded advising me to use the spacer block. I don't want to have to manually do that every time I create a blog post. If someone can provide a CSS code that will save me a lot of time. Thanks in advance.

https://www.allamericanbullies.com/

24 minutes ago, yjchong said:

Hello everyone. 

I posted this before and didn't quite get the answer I wanted. I want to increase or decrease the spacing on a heading in a blog post. I want to play with it until I get what I like. I've attached a screenshot with red arrows to show you experts what I'm talking about.

In the original post, someone responded advising me to use the spacer block. I don't want to have to manually do that every time I create a blog post. If someone can provide a CSS code that will save me a lot of time. Thanks in advance.

 

https://www.allamericanbullies.com/

 

 

Do you want to increase and decrease spacing for each heading?

12 minutes ago, Web_Solutions said:

Do you want to increase and decrease spacing for each heading?

Yes, I'm assuming that once I add in the CSS it will automatically increase or decrease the spacing to my liking. I want to play with the spacing to get it to exactly what I like. Thanks!

15 minutes ago, yjchong said:

Yes, I'm assuming that once I add in the CSS it will automatically increase or decrease the spacing to my liking. I want to play with the spacing to get it to exactly what I like. Thanks!

This is the code for increase or decrease the spacing. For increase or decrease the spacing, change the value 20px to 30px or 10px or as you want.

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

.blog-item-content-wrapper .html-block {
  h3 {
    margin-top: 20px !important;
    margin-bottom: 20px !important;
  }
  p{
    margin-top: 0 !important;
  }
  h3:first-child {
    margin-top: 0px !important;
  }
}