How can I reduce spaces/padding?

How would I reduce the gap between these two areas (in the screenshot)?

I can’t find the correct CSS to help me. I tried to make the padding around the horizontal line smaller, but for some reason it only takes the padding away from the top of the line.

And I can’t find a way to reduce the padding above and below the text block, at least without ruining the text on everything else on the page.

Really would be a big help if someone knew how to fix my problem!

You'll need to post a link to your site to get a great answer.

Try this in the Custom CSS Editor, it worked for my template:

.sqs-block-horizontalrule hr {
 margin-top: 1px
}

You can try this in your custom CSS:

hr { margin-top: 0px; margin-bottom: 0px }

You can get more info here: http://www.squaredesigner.com/blog/squarespace-remove-horizontal-line-padding

I'm not a Squarespace or CSS expert by any means, however I've been relentlessly playing with padding to tighten up my webpage.

The following have worked for me - you'll have to play with the values (yes, it's tedious!):

/*Padding on Horizontal Rules (Lines)*/

.sqs-block-horizontalrule hr {
  margin-top: -10px;
    margin-bottom: -10px;
}

/*Padding on Code Blocks*/

.sqs-block-code {
 padding-top: 0px;
 padding-bottom: 0px
}

/*Padding on Text Blocks*/

.sqs-block-html {
 padding-top: 5px;
 padding-bottom: 5px;
}

A catch all padding reduction strategy seems to be:

.sqs-block {
margin-top: -5px;
margin-bottom: -5px;
 padding-top: 0px;
 padding-bottom: 0px;
}

But for some reason that did not work on horizontal rules, and only sometimes on text blocks - hence the multitude of padding related code above.

I have not tested this across devices yet - and to be honest am somewhat worried that I'm ruining the aesthetics and functionality of the site! Haha!

So far, the above has helped though.

Good luck!