What is padding in Squarespace?

Padding refers specifically to the margin between the element and its outside border at the top of the page. For example, the top of a web page may have a logo, and the padding would be the space between the logo and the margin / border of the header.

When a website has a small amount of header padding, it can look cramped and provide a poor viewing experience for a customer. Most web designers and graphic designers like to use header padding because it tends to produce a sleeker and more professional look.

Increasing header padding / spacing can be a very simple way to improve your website’s aesthetics. Fortunately, adding extra padding to a Squarespace website is quite straightforward.

Here, we address the benefits of header padding, padding options and how to change the header padding on your website.

Difference between padding and margin

Padding and margin are commonly confused, so it’s important to recognise the difference between the two before you begin to make changes to your website heading. While padding is the space between an element and its border, margin is the space outside the border.

For example, if a logo element is 400 pixels x 200 pixels, but the actual logo that can be seen is only 100 x 100 pixels, then the padding would be the space outside of the 100 x 100 image, but inside the entire element. Whereas, the margin would be the space between the outside of the 400 x 200 image and the next element.

Why change padding in Squarespace?

Make the brand or topic stand out

Whether the page in question is a home page, or other pages, they will almost always have a purpose. For example, an about page will feature information about the company. Header padding helps the title – or subject – of the page stand out.

The same notion can be applied to a home page. A home page will often feature the business or company’s logo. By having header padding around the logo, it ensures that no other information comes too close to it, and allows it to stand out to the customer.

Make the page more aesthetically pleasing

Many web designers use header padding to provide a high-end customer experience for the website viewer. When a website is well-spaced out, and there is a good amount of open space, it can provide a more pleasing and calm experience for the viewer. Padding gives whitespace or negative space between elements and provides “breathing room” for the viewer.

For example, have you ever viewed a website that’s crammed full of information without many spaces? Most people will find this overwhelming and be less inclined to take in the available information.

It can be used to encourage users to focus on specific elements

When header padding is used correctly, it can point a user’s eyes to specific areas. For example, if the website is for a hotel company, padding can be used to encourage a user’s eyes to migrate towards a “book now” button.

Usually, when there is a lot of space around an object like a “book now” button, users will be able to see it clearly and quickly, and it’s more likely that they will click it. If the button is hard to find, or hidden by a lot of other elements, a user may get frustrated and quit the website, hindering bookings.

Unwanted blank spaces or blocks

While header padding is a commonly used feature that web designers engage to improve the aesthetics of a website, it can also work in the opposite way. When there’s too much padding, or badly space padding, then a website can look unprofessional.

For example, if the image element of the logo is 100px x 100px, but there is 1500px padding surrounding it, there will be a huge space between the logo and the next elements. This tends to look amateurish and could cause a customer to lose trust in the professionalism of your business.

Fortunately, there’s an easy way to check for extra blocks of padding and remove them. To check and delete extra blocks, you can follow the below steps.

  1. Navigate to the home menu and click pages.
  2. Select the page where you have extra blank space and would like to remove it.
  3. Click edit to open the page editor.
  4. In the preview hover over the blank space. If the blank space is the result of extra padding, a trash can icon will appear.
  5. If you want to remove this block, you can go ahead and press the trash can item.

Padding options on different versions of Squarespace

How to change padding on Squarespace Version 7.1

To control site-wide spacing:

  1. While editing a page, open site styles, then click Spacing.
  2. Use the Site Margin tweak to set the amount of space between your content and the edge of your site. 

To change header padding:

  1. Click Edit on a page, hover over the header, then click Edit Site Header.
  2. Click the desktop icon. 
  3. Click Full or Inset to set the width of the header content. 
  4. Scroll down and use the padding and spacing tweaks to set the amount of space in the header. 

To change individual page section padding:

  1. Click Edit on a page, then click the pencil icon on a section.
  2. In the Format tab, use the Section Height and Content Width options to adjust the amount of space in the section. 
  3. In the Background tab, click Full Bleed or Inset to set the width of the section content. 

How to change padding on Squarespace Version 7.0

You can also look for tweaks that affect your blank space:

  1. Navigate to the home menu and click design and then site styles.
  2. Guide your cursor to hover over the blank space that you want to change.
  3. A blue style highlighter box will appear around the padded area.
  4. Click the page to display only the style tweaks for that element and hide the rest. This shortcut is available in most templates and for most areas on your site. However, if this shortcut doesn’t appear you can scroll through all of the options until you find the padding option.
  5. Once this is selected, an icon with a line in the middle and arrows on both sides should appear. Simply click the mouse and drag it towards the middle of the page, and this should automatically increase the padding.
  6. If you’d like to decrease the padding, you can use the same method as above, however, when completing step 5 you should drag your mouse towards the outskirts of the page.

Frequently Asked Questions

What is the right amount of header padding to use on a website?

The answer to this depends on many variables. Different website layouts, and different brands will work better with varying sizes of max-width and header padding. Our expert website designers have extensive experience both with coding and with graphic design, they can help you ensure that the padding that’s used on your website enhances the experience for visitors to your page.

Can I make my own website on Squarespace?

Squarespace is a website building and hosting company that allows people to create an account and make their own websites. However, while it’s certainly possible to make websites, people who aren’t extensively experienced in how to do so, may only be able to make basic sites.

If you’re looking for to create a unique website that delivers a high-end customer experience that excuses professionalism and has highly interactive features, then we’d suggest using a website designer. At White Peak Digital our Squarespace web designers have extensive experience in designing exceptional Squarespace websites and have the coding knowledge to help turn your dream website into a reality.

Looking to build a custom Squarespace website?

If you’re interested in creating an individual custom website that is designed with a high-end customer experience in mind, then our Squarespace is a great option. Squarespace has design options that generate sleek websites with the option to include a great amount of whitespace or padding.

Our Squarespace web designers have the ability to code, a skill that is used to make your website unique and personalised.

To your success,
Jackson