Jump to content

How to modify spacing b/w paragraphs? (not line height)

Go to solution Solved by JOHNMD,

Recommended Posts

Hi everyone,

Having a bit of a spacing issue, where my spacing b/w paragraphs is far too large, larger than the spacing between my H1 and P1 oddly. I've tried double enter as well as shift+enter, and both methods leave me with too large or barely any gap b/w my paragraphs, respectively. Changing the line height isn't helpful as I want to keep the line height within my paragraphs the same. Is there a workaround for this?

Context: On 7.1, using a custom font "Circular", that I added with CSS

@font-face {
    font-family: 'Circular';
       src: url('https://static1.squarespace.com/static/5e8c876bd241ab77d4b4ca77/t/5e8c96d8d04b53346acc3b1d/1586271960148/CircularStd-Book.otf');
  }

h1,h2,h3,h4 {font-family: Circular;}

Any help would be greatly appreciated!

Edited by khuuvin
Link to comment
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

  • Solution

@khuuvin, you can can decrease the margin distance of the H1 tag by inputting a negative bottom margin in your H1 tag. If the required change is specific to one section then the code below requires additional targeting. The code applies to all your site H1 tags. You'd need to identify the page section first.

For all H1 tags on your site:

h1 {
margin-bottom: -10px;
}

For distance between paragraphs - excluding the first P1 to H1 for the whole site: (change the em's or input by px)


p {
  margin-top: 2em ;
  margin-bottom: 2em ;
}

Edited by JOHNMD

mcgouran.john@gmail.com

Link to comment

@khuuvin  the code is as follows  for specific page sections. Replace your page-section id number between the  "..."  below and adjust the -px number . You can also switch to a h2, h3 and so on. 

[data-section-id="5e................."] h1{
margin-bottom: -20px;
}

- John

mcgouran.john@gmail.com

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.