Spacing between UI components

1. What is the spacing inside a UI element?
2. What is spacing in design systems?
3. Why is spacing important in design?
4. What is padding in UX design?

What is the spacing inside a UI element?

The amount of white space between elements in the UI indicate how the elements relate to one another. The Law of Proximity suggests that: Related elements should be spaced closer together. Conversely, unrelated elements should be spaced further apart.

What is spacing in design systems?

Spacing is the negative area between elements and components. It is commonly controlled in code with margin and padding . Carbon offers several methods such as tokens and layout components to make implementing spacing in product easier and more consistent.

Why is spacing important in design?

Spaces invokes imagination, when we see space in design, it allows us to imagine and roam free. It creates visual hierarchy to the elements when gaps are created to ensure that the users can find and digest information presented more easily.

What is padding in UX design?

Padding is the space between elements within a component. Padding can be measured both vertically and horizontally and does not need to span the whole height of a layout. Padding is measured in increments of 8px or in some cases of 4px.