Spacing

Add Margin and Padding to Components.

The Spacing controls allow you to add Margin and Padding to an object. By default this control is disabled, this is to ensure the pading and margin classes are not applied to the object.

To set Padding and Margin you need to switch the "Enable" toggle to on.

The "Mask & Paintbrush" icon will toggle the control between selecting from a Theme Preset and setting an arbitrary value. To change the arbitrary value by 5px increments, click and drag the mouse up and down. To change the value by increments of 1px hold down the shift key while dragging.

To link the opposite value, click the dashed line so the highlight is set to blue. This can be done independently for vertical and horizontal values.

Margin

The Margin property controls the space around an element, outside of its border. It creates space between the element and its neighboring elements.

Margins can be set for all four sides of an element—top, right, bottom, and left—or individually for each side.

When you set a margin-right on a component, it creates space to the right of it. However, if there’s nothing positioned immediately to the right — like another component or a container edge — you might not see any visible change. This is a common CSS quirk that can feel a bit confusing at first, especially when you’re expecting the element itself to shift.

Padding

The Padding property controls the space inside an element, between its content and the element’s border. Unlike margin, which affects the space outside an element, padding pushes the content inward, creating internal spacing within the element itself.

Padding can be set for all four sides of an element—top, right, bottom, and left—or individually for each side.

Spacing UI in Elements

RapidWeaver Elements Component Spacing (October 2024)