Skip to main content

Spacer Web Part

The Spacer web part adds empty vertical space between web parts and sections on a SharePoint page, and that is all it does. You drag it to the height you need, anywhere from 16 to 320 pixels, and it disappears completely on the published page, leaving only clean breathing room between elements. Generous white space is much of what separates polished intranet pages from cluttered ones.
Author
Microsoft
Related
Divider

Benefits

  • Room to breathe: generous white space is a big part of what separates polished intranet pages from cluttered ones.
  • Pixel-level control: the height adjusts anywhere from 16 to 320 pixels, far finer than the default section padding allows.
  • Invisible by design: visitors see only clean space on the published page, never an element.
  • Works in any layout: it drops into any column of any section, as many times as the design needs.
  • Mobile aware: you decide whether each Spacer appears in the mobile view, so phone screens are not wasted on extra scrolling.

Settings

  • Adds invisible vertical space: a blank block between web parts that visitors never see as an element, only as breathing room.
  • Resizes on the canvas: drag the gray bar up or down to the height you want, or tap the up and down arrow keys for pixel-level control.
  • Works anywhere on the page: inside any column of any section layout, as many times as the design needs.

Limits and Nuances

  • Height runs from 16 to 320 pixels: if you need a bigger gap, stack two Spacers, though a layout that needs that much empty space usually wants a new section instead.
  • Mobile visibility is the only setting: you choose whether the Spacer appears in the mobile view of the page; everything else, including the height, happens directly on the canvas.
  • The Spacer is invisible on the published page: its outline and gray bar appear only in edit mode.
  • Sections already add their own default padding: reach for a Spacer only when the built-in spacing is not enough.

Spacer vs. the Alternatives

  • Spacer vs. Divider: Divider draws a visible horizontal line; Spacer adds invisible space. Use Divider to mark a change of topic and Spacer to let a layout breathe.
  • Spacer vs. separate sections: splitting content into sections with different background colors creates natural visual breaks. Spacer is for fine-tuning gaps inside a column, not for structuring the page.
  • Spacer vs. an empty Text web part: an empty Text web part can fake a gap, but its height is unpredictable and it confuses the next page editor. Spacer is the purpose-built tool.

Common Questions About the Spacer Web Part

How tall can a Spacer web part be?

The height adjusts from a minimum of 16 pixels to a maximum of 320 pixels. You set it by dragging the gray bar in edit mode or, for precise control, by pressing the up and down arrow keys. If a design calls for more than 320 pixels of empty space, stack two Spacers – or step back and consider whether the content belongs in a separate page section.

Do visitors see the Spacer web part on the published page?

No. The Spacer renders as pure empty space – no outline, no border, no placeholder. The gray bar and the web part frame appear only while the page is in edit mode, so editors can find and resize it. Once published, all anyone sees is clean breathing room between the elements above and below it.

Does the Spacer web part work on mobile?

Yes, and you get a say in how. The Spacer includes a setting to choose whether it appears in the mobile view of the page. That matters because a gap that looks elegant on a wide desktop layout can feel like wasted scrolling on a phone, so hiding Spacers on mobile is often the right call.

What is the difference between the Spacer and Divider web parts?

They solve the same problem – visual separation – in opposite ways. The Divider draws a visible horizontal line between web parts, which signals a clear change of topic. The Spacer adds invisible empty space, which simply lets the layout breathe. Polished pages tend to use Spacers generously and Dividers sparingly, since too many lines make a page feel boxed in.

Where should I use the Spacer web part?

Reach for the Spacer whenever the default section padding leaves elements too close together. It is ideal for giving a headline room, separating two ideas in the same column, or opening up a dense layout. Because the height is adjustable from 16 to 320 pixels and the part is invisible once published, you can fine-tune spacing precisely without adding any visible element to the page.

Why use a Spacer web part at all?

Because white space is a design tool. Pages where every web part is jammed against the next read as cluttered, and cluttered pages do not get read. A few well-placed Spacers give headlines room, separate ideas, and guide the eye down the page. The intranet designs on LookBook 365 rely on this exact out-of-the-box technique – the only way Greg Zelfond builds. Spacer Web Part Example

Spacer Web Part Example
Spacer Web Part Example