Reduce space between H3 and paragraph

Hello!

I’m trying to reduce the following space:

When I inspect the site it says that it has a bottom margin of 20px. I’m using Wordpress with the Astra theme. When I go to Customize → Additional CSS and add the following code it doesn’t work:

h3 {
  margin-bottom: 0px;
}

I’ve tried that same code in many ways but it doesn’t get solved, I even tried by adding top padding to p but it doesn’t work

Hello!
Try the same code but instead of targeting h3 target its class or something like that.
hope it works, Happy Coding!

What do you mean by class? Sorry, I’m a beginner

Basically Classes are the attributes that are used to target elements in css
and they work like <h1 class="hello">Hello World</h1>

Thanks for the reply. How should I make the modification to the previous code?

Follow the steps:
1.Go in to the html file of your theme
2.Add an id to it
3.Add that id to your css file for example

.hello {
  margin-bottom: 0px;
}

In css (.) period is used to target a class

Is there any tutorial on how to add an ID to the html file?

Sorry,
If it do not work please seek help from some other developer cause im new to this aswell but i have some experience.
i hope that works, Happy Coding

1 Like

Oh just put margin: 1px or something
because margin 0 means it has no margin lol

I tried and it didn’t work. Even if I put 100px it doesn’t even move. If instead I use padding-bottom I see changes, but it only adds more space. I tried by putting for example padding-bottom: -15px; but it seems that it doesn’t work with negative numbers

Does it work with !important

h3 {
  margin-bottom: 0px !important;
}

As suggested you should target the specific h3 and not all h3 elements. Unless you are sure you never want the margin and any h3 element.

It worked! Many thanks lasjorg

No problem.

You do have to be a little careful about using !important because it trumps all. But it isn’t uncommon to use it with WordPress customization as it can be hard to know the exact specificity that will always work.

If you made a class for it it still needs higher specificity than the current selector in the image element.className. Or the same specificity and be in the correct place in the cascade to overwrite the other rule. Even using an id selector might get overwritten by some styles on a different page.

Before you provide me that solution, I was checking that “class” thing and it also worked somehow:

h3.wp-block-heading {
	margin-bottom: 5px
}

Which one of these solutions would you recommend to use? The one with the class name or the one with !important?

I’m not sure if I understood this clearly: “As suggested you should target the specific h3 and not all h3 elements. Unless you are sure you never want the margin and any h3 element.”

As it looks right now with little spacing is how I want it to look everywhere on the site, post, pages, etc.

It can be hard to predict how all pages will look with that h3 style. But if you are sure that is how you want all h3 elements to look then using !important with a plain h3 selector is fine.

Usually, the lower the specificity you can use the better. So as close to the specificity of the style you are trying to overwrite.

However, with WordPress, it is not always that easy to predict the exact specificity that will work forever and on all pages. The theme can update and change selectors, the theme can have different styles for elements depending on the page you are on, the theme can dynamically add and remove classes you are not aware of, etc.

1 Like