Why is there extra spacing around headings on my live Squarespace site? (7.0 & 7.1)

• 00
• 01
• 02
• 99

You know what I’m talking about, don’t you?

That completely-out-of-nowhere padding or something that seems to mess up your text spacing, but ONLY when looking at the live site.

There’s no extra anything while on edit mode, so where the heck is that coming from?!

Well, let’s take a look, shall we?

Breakdown and fix

TL;DW

The reason why that gap or extra spacing is showing up is due to default margin properties that are applied to headings across Squarespace.

The problem is that those margins are being overridden by additional code that’s being added to the edit mode, but not the live site.

So, a quick way to fix the issue is by simply targeting the problematic headings (in this case the ones inside code blocks), and manually removing the margins!

.code-block h4 {
  margin-bottom: 0;
  margin-top: 0;
}

How easy is that?!

Until next time,

B.

---

Full code

.code-block h4 {
  margin-bottom: 0;
  margin-top: 0;
}