Change padding settings on your site to get rid of extra white space.
Blank areas, also known as “white space” or “negative space,” can be a key component of visual design, creating a calm and open layout.
If you have a blank area on your site that you want to adjust or remove, it is probably caused by padding, which is the space built into a layout around different site elements, like page margins, navigation, headers and footers.
If you're using our classic editor, it may also be caused by extra blocks on the page, such as spacer blocks.
This guide explains how to troubleshoot issues with blank spaces.
Before you begin
- All Squarespace sites give you some control over padding, but certain areas may not be adjustable. In version 7.0, each template has its own styling options.
- In the classic editor, padding around blocks, such as the text block or image block, can’t be adjusted.
- The amount of blank space that appears may vary depending on device size, browser size, and resolution settings. Contact your device manufacturer's support for help with resolution settings, but keep in mind the appearance may still vary for visitors because of Squarespace's responsive design.
- If the amount of content on your page is shorter than your browser window, blank space may appear between the page content and the footer. It's not possible to prevent this entirely, as this ensures your site fills any browser size, but you can add more content to your page to prevent it in most browser windows.
- If you’re having trouble with padding on your site that can’t be adjusted with style changes, the Squarespace Forum may be able to help. Please note that we don't provide support for advanced modifications involving code.
Check padding options
Each Squarespace site has its own layout and built-in padding and style options. To check if you can adjust padding for an element on your site, navigate to the page with the blank space, then explore your style options. How you do this depends on which version of Squarespace your site is on.
To control site-wide spacing:
- While editing a page, open site styles, then click Spacing.
- Use the Site Margin tweak to set the amount of space between your content and the edge of your site.
To change header padding:
- Click Edit on a page, hover over the header, then click Edit Site Header.
- Click the desktop icon.
- Click Full or Inset to set the width of the header content.
- Scroll down and use the padding and spacing tweaks to set the amount of space in the header.
To change individual page section padding:
- Click Edit on a page, then click the pencil icon on a section.
- In the Format tab, use the tweaks to change section height, width, and padding. The options available may vary depending on the type of section.
- In the Background tab, click Full Bleed or Inset to set the width of the section content.
For more help styling your site, visit Making style changes.
Open the Site Styles panel.
In many templates, you can directly edit padding areas by clicking and dragging in the site preview:
You can also look for tweaks that affect your blank space:
- Hover over the blank space. A blue style highlighter box may appear around the padded area. 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.
- If that doesn’t help, scroll through site styles and look for tweaks with the keywords “padding,” “margin,” “full bleed,” or anything similar. Tweaks that affect the layout of the site may also impact padding.
In either version:
- Most padding tweaks have a slider. Move the slider to 0px to eliminate padding altogether. You can also type 0px in manually and press Enter.
- Check how your padding looks on mobile as padding changes may affect mobile layouts differently.
- Padding styling often applies across all pages of the template, especially in areas like the footer. Check other pages of your site to see how this applied.
- Some padding is built in and can't be removed or changed.
Check for extra blocks
If you have unwanted blank space in the classic editor, check for extra blocks. Spacer blocks, code blocks, and empty text blocks can appear as blank areas when the page editor isn’t open. Extra line breaks in text blocks may also create blank spaces.
To check for and delete unwanted blocks:
- Open the Pages panel and click the page with the blank space you want to remove.
- Hover over the page and click Edit to open the page editor. For individual collection items, such as blog posts or events, click the item, hover over it, and click Edit.
- In the preview area, hover over the blank space. If the blank space is from an extra block, an annotation with the block type will appear. Click the block and a trash can icon will appear over it.
- Click the trash can icon, then click Yes.
- Save your changes.
You can use this process for any editable content areas on your site that support blocks, such as pages, blog posts, and footers.
For more help, visit Deleting a block.
Here's how this looks in version 7.0: