Adjusting element spacing

Every type of element - including forms and the container elements (groups, tooltips, tables, and tab containers) - consists of two parts: the visible content, which the user sees and interacts with, and an invisible element container which controls spacing and the relative distribution of elements on a form or in a container element.

Element spacing settings control the element container margin and padding. These are analogous to the CSS settings of the same names:

  • Margin settings control the spacing around the outside of the invisible element container.

  • Padding settings control the spacing between the visible part of the element and the invisible element container.

Element margin and padding settings contribute to element distribution. For more information, see Element distribution.

Note

For all elements, spacing default values are 0 px, except the outer bottom margin (24 px).
Group elements have spacing default values of 0 px for all padding and mapping settings.
Forms default is 24 px for padding (all sides).

To adjust element spacing

  1. Select the UI element on the canvas.

  2. Select the SPACING tab.

  3. Select margin and padding settings from the dropdowns.

../../../../_images/ss-uibuilder-spacing.png