Remove Spacing Under Headings

What does this code do?

This code snippet will allow you to remove some of the spacing under a heading.

Check Line Height

The first thing to check is your line height. Go to the Site Styles and lower the line height of the heading you want to change. Make sure to double check what this looks like when the font is on two lines. If you decrease the line height to zero the font will overlap each other when it goes to the second line.

Code Snippets

If there is still too much spacing under the text, you can remove some of the margin. Copy and paste the appropriate code into Design > Custom CSS.

/* Remove Margin from Heading 1*/
h1 {
  margin-bottom: 1rem;
}

/* Remove Margin from Heading 2*/
h2 {
  margin-bottom: 1rem;
}

/* Remove Margin from Heading 3*/
h3 {
  margin-bottom: 1rem;
}

/* Remove Margin from Heading 4*/
h4 {
  margin-bottom: 1rem;
}

You can then edit the 1rem to whichever size you would like. Be sure to check the sizing on multiple screen sizes.

If you only want to remove the spacing under a specific heading, add the #BLOCKID of the text block before the code from above. For example, if I wanted to remove the spacing under a specific heading 1 I would use the following code.

/* Remove Margin from Specific Heading 1*/
#BLOCKID h1 {
  margin-bottom: 1rem;
}

How To Use It

1. Copy and paste the code as indicated above.

2. Customize the 1rem to the spacing you would like. Be sure to check the sizing on multiple screen sizes.

3. To learn how to find a block id check out our Start Here guide.