How to increase Gaps between Paragraphs in Squarespace 7.1

Apr 17

Something I’ve noticed about Squarespace 7.1 is the decreased space between paragraphs, especially when writing blog posts. It just needs a little more space for the readers eyes to ‘breath’.

My first thought was to head over to the design > spacing tab. But unfortunately, there isn’t much you can do there.

Plan B: Dive into Inspect Mode and try find the code clippet to customise this myself.

Turns out, by default Squarespace has a Margin of 1em for both top and bottom, and 0px for the sides.

if you want to generate leads on autopilot…

In order to increase the top and bottom margins, here’s how I did it:

Go into Design > Custom CSS
Copy and paste in the following code:

p {
    margin-block-start: 1.5em; /*space at the top of every paragraph */
    margin-block-end: 1.5em; /* space at the bottom of every paragraph */
    margin-inline-start: 0px; /* space on the left (start) of every paragraph */
    margin-inline-end: 0px; /* space on the right (end) of every paragraph */
}

Quick Explanation:

This means you are increasing the space by 1.5em at both the Top AND Bottom of the paragraph.

Here’s a quick before and after in the Inspect Mode:

Variation 1: Just increase space at the bottom of every paragraph:

p {
    margin-block-end: 1.5em; /* space at the bottom of every paragraph */
}

*Margin bottom: 1.5em // Margin top - default value 1em*

Variation 2: Increase space on the left and right side of every paragraph:

p {
    margin-inline-start: 10px; /* space on the left (start) of every paragraph */
    margin-inline-end: 10px; /* space on the right (end) of every paragraph */
}

*Left and Right Margin 10px each // Top and Bottom Margins default 1em*

Tips for adjusting space:

Play around with the numbers until you get the right space.
it doesn’t matter if you use ‘em’ or ‘px’. Use whichever comes more naturally to you.
1em = 16px

Did that work for you? Let me know if you have any questions! Happy custom coding friends!