Margin vs Padding: How to remove spacing from anywhere in Squarespace.
One of the most common challenges my clients have when designing a Squarespace website is spacing! Whether there is too much or too little, spacing between elements in Squarespace can be tricky.
In CSS, there are two main properties responsible for spacing: margin and padding.
In this video, I explain the difference between margin and padding, how to know which one is causing the space, and how to remove it (or add to it).
Note: Before you jump in, this video requires a basic knowledge of CSS structure and how to target elements based on their class or id. If you are new to CSS, please check out my beginner’s guide to CSS first!
Margins vs Padding in Web Design
In web design, margins are the spaces outside of elements. For example, you may have a section with an image, two text blocks, and a button. The spaces between each block would be margins.
Meanwhile, padding is the space inside a block, between your content and its border. For example, if you add a text block to your page, the space between the edge of the text and the border of the block is the padding.
padding vs margin
How to Find the Margin or Padding
Before you can remove (or add) space from an element on your Squarespace website, you have to determine whether you are trying to edit the padding or the margin.
To do this, simply right-click on the block you need to edit. Then select “Inspect” to open Chrome Dev Tools. (You will need to be using the Chrome web browser.)
When you hover over the blocks on your website, the padding and the margin will both be highlighted. Padding is highlighted green, and margin is highlighted orange.
I explain this more in detail in the tutorial video. If you’re not familiar with Chrome Dev Tools, it can be a little overwhelming. But this is the easiest way to see where the margin vs the padding is!
How to Remove Spacing Across Your Squarespace Website
Once you know where you need to remove the spacing, it’s as easy as adding a little bit of CSS to your Squarespace website.
For example, if I want to remove the margins under a Heading 1 block, I would add the following code snippet:
h1 {
margin-bottom: 0;
}That simple snippet of CSS will change all of your H1 blocks sitewide, setting the bottom margin to 0.
Or, let’s say I wanted to remove the margin above the image subtitles. I would use the following code:
.image-subtitle {
margin-top: 0vw;
}
Buttons are another element I might want to edit. By default, Squarespace adds a lot of padding around button text. I can reduce the top and bottom padding with the following code:
.sqs-button-element--primary {
padding-top: 0.8vw !important;
padding-bottom: 0.8vw !important;
}
If you’re not familiar with using CSS to customize your website, I recommend you scroll to the bottom of the post and download my free guide to popular CSS properties used in Squarespace.
Removing Spacing for Individual Blocks
The problem is…what if you don’t want to remove the spacing sitewide? What if you just want to remove margins or padding for one block?
For that, you simply need to find the ID for the block you want to edit. I use the Squarespace Block ID Finder Chrome Extension to easily see the ID for any block on my website. Then copy the ID and paste it at the beginning of the CSS snippet.
By putting the block ID in front of your code, you can individually edit the padding and margins for any block on your website.
Editing the Spacing for Mobile View
Often, your website spacing may look just fine on desktop view, but not on mobile. If that’s the case, you can remove the padding or margin for mobile view only.
All you have to do is add a media query to the beginning of your code. A media query is a small piece of code that specifies the screen size that the code will apply to. Click here for my tutorial on using media queries.
If you’re new to coding, this may seem like a lot of information! But don’t worry, it’s not as hard as it sounds. With a little bit of practice you’ll be able to remove or add padding or margin from almost anywhere on your Squarespace website.
