Note: While our most popular guides have been translated into Spanish, some guides are only available in English.
Removing blank 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 one of two things:

  • Extra blocks on the page, such as Spacer Blocks.
  • Padding, the automatic space built into a layout around different site elements.

This guide explains how to troubleshoot issues with blank spaces.

Before you begin

  • Every template has its own style options. Although many templates give you control over padding, some areas may not be adjustable.
  • The padding around blocks, such as the Text Block or Image Block, can’t be adjusted.
  • If you’re having trouble with padding on your site that can’t be adjusted with the Style Editor, the Squarespace Answers community may be able to help. Please note that we don't provide support for advanced modifications involving code.

Step 1 - Check for extra blocks

The first thing to check when you have an unwanted blank space is if the page has an extra block. Spacer Blocks, Code Blocks, and empty Text Blocks can appear as blank areas when the page editor isn’t open.

To check for and delete unwanted blocks:

  1. In the Home Menu, click Pages.
  2. Click the page with the blank space you want to remove.
  3. In the preview area, hover over the page and click Edit to open the page editor.  For individual collection items, such as blog posts or events, find the item in the Pages panel, hover over it, and click Edit.
  4. In the preview area, hover over the blank space. An annotation with a trash icon will appear.
  5. Click the trash icon and click Yes.
  6. Save the page.

You can use this process for any editable blocks areas on your site, such as site footers, blog posts, sidebars, and per-page headers.

Tip: Extra line breaks in Text Blocks may also create blank spaces.

For more help, visit Deleting a block.

Step 2 - Check padding options

Each template has its own layout and built-in padding. The complexity of your Style Editor depends on your template. Some allow for detailed control over padding, while others have more streamlined options.

To check if you can adjust padding for an element on your site, navigate to the page with the blank space. Then go to the Home Menu, click Design, and then click Style Editor.

In many templates, you can directly edit padding areas by clicking and dragging in the site preview:

cilck-and-drag-padding.gif

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

  1. Hover over the blank space. A blue 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.
  2. If that doesn’t help, scroll through the Style Editor and look for tweaks called “padding,” “margin,” “full bleed,” or something similar. Tweaks that affect the layout of the site may also impact padding.

Edit these tweaks to remove or reduce the padding. 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.

Be sure to check how your padding looks on mobile as padding changes may affect mobile layouts differently.

Note: Some padding is built into certain templates and can't be removed or changed.

Was this article helpful?
11 out of 52 found this helpful