Spacing Controls

Spacing controls are a configurable property for individual components. This control is used to adjust the vertical space between a component and the component preceding it on the page with the following predefined spacing values:

Desktop viewport* Tablet viewport** Phone viewport***
Extra Small 32px 24px 16px
Small 48px 40px 24px
Medium 64px 56px 32px
Large 88px 72px 40px
Extra Large 112px 96px 56px

*: desktop viewport refers to a screen or browser window that is 1200px wide or larger.
**: tablet viewport refers to a a screen or browser window that is between 768px and 1200px wide.
***: refers to a a screen or browser window that is less than 768px wide.

Accessing the Spacing Controls

Spacing controls for a component can be found in the Control Properties dialog. Follow these steps to access this dialog in the Experience Editor:

  1. Select the component to load the component control bar.
  2. On the component control bar, click More & select Edit component properties.
  3. This will open the Control Properties dialog. Scroll in the dialog until you find the Controls section (the location of this will vary per component) with the Vertical Spacing control.
  4. Click the Vertical Spacing dropdown to select the amount of vertical spacing you would like to apply to the component.

Please note

Vertical spacing applied to the first component within a frame, highlight section component, or in placeholder 2 of the enhanced content image banner will be overridden by our default spacing rules. If vertical spacing is needed in this scenario, it should be applied to the parent component.