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:

Select the component to load the component control bar.
On the component control bar, click More & select Edit component properties.
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.
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.