How To Reduce Squarespace Heading Spacing

Abi Bacon

Squarespace Developer based in Southampton, UK

Recently Leslie Mello, a designer that I regularly work alongside, asked me if there was a way to reduce the spacing between Headings & Paragraphs within Squarespace Text Blocks, and luckily there is! Unfortunately there isn’t a setting to adjust this within the Site Styles, but with just a few lines of CSS we can control this ourselves.

Squarespace adds a margin around the different Heading Sizes, you can see this in the below screenshot, this shows my website being viewed from within the web inspector.

Here’s the CSS that adds this in. The first value depicts the top and bottom margin, and the second is the left and right margin.

There is also another snippet of CSS to be aware of (below), this sets the margin-top to ‘0’ for the first child within a text block, whether this be a heading or a paragraph.

Now what we want to do is target the different heading sizes and adjust this margin to our liking.

You’ll want to add this to your Custom CSS area and adjust the values to your desired spacing.

h1, h2, h3, h4 {
  margin-top: 1rem;
  margin-bottom: 0rem;
}

We can also do the same for Paragraphs, just add the below to your Custom CSS area.

p, .sqsrte-large, .sqsrte-small {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

---