Skip to main content

Spacer

Use Spacer to add controlled vertical space between sections or elements when margin controls are not the right place to make the adjustment.

How It Works In Atomicat​

The 3.0 Spacer drawer is intentionally minimal. It exposes one Space control mapped to the element height for the current responsive device. The range supports units, reset behavior, and a max of 500. Because the control is responsive, desktop, tablet, and mobile spacing can be adjusted independently.

When To Use It​

  • Add breathing room between dense sections.
  • Create responsive spacing that differs between desktop and mobile.
  • Separate elements when changing the element margins would affect reuse or alignment.
  • Reserve visual space in a template while building content.

Configure The Element​

  • Select the spacer and set Space for the active device.
  • Switch to tablet and mobile modes and reduce space where vertical height is limited.
  • Use Container padding or margins for structural spacing; use Spacer for deliberate gaps.
  • Reset the value if spacing starts to drift from the design system.

Testing Notes​

  • Preview the full page scroll after adding spacers.
  • Check mobile pages for excessive blank areas.
  • Confirm nearby sticky or floating elements do not cover the space you intended to create.

Limitations And Tips​

  • Spacer adds empty space; it should not be used to position elements that need true alignment.
  • Too many spacers make pages hard to maintain.
  • Prefer consistent container spacing for repeated section patterns.

FAQ​

Is Spacer responsive?

Yes. The height is stored per responsive device.

What is the maximum space value?

The referenced drawer uses a max of 500 for the Space range.

Should I use Spacer or margin?

Use margins or container padding for structural spacing; use Spacer for an intentional blank gap between blocks.