Spacing properties control the visual distance between your components and their contents. Mastering spacing is crucial for readability, visual hierarchy, and ensuring your UI elements are easily tappable. Spacing is defined using two fundamental properties: Margin and Padding.

Margin

Margin specifies space outside of a component. Margin values are defined by a numeric value and can be set individually per side or uniformly by clicking the link icon. For elements with a border or background, the margin is applied outside of these.

• Top: Defines the space above of a component
• Bottom: Defines the space below a component
• Left: Defines the space to the left of a component
• Right: Defines the space to the right of a component

Padding

Padding specifies space inside of a component. Padding values are defined by a numeric value and can be set individually per side or uniformly by clicking the link icon. Padding is applied between the border of a component (even if it’s invisible) and the contents inside.

• Top: Defines the space at the top of a component between the container and contents inside
• Bottom: Defines the space at the bottom of a component between the container and contents inside
• Left: Defines the space on left of a component between the container and contents inside
• Right: Defines the space on right of a component between the container and contents inside