Spacing is a set of rules that clarify how elements in an interface should be arranged. It includes the measurable values that define distances inside and outside of elements. When spacing is consistent, it helps maintain a clean and organized layout and makes it easier for users to navigate your product.

• Layout spacing: Layout spacing defines the distances between the most significant elements (for example, between a top bar and content, or the sidebar and content) and the page itself. Material Design guidelines recommend aligning elements to 8dp and sizing them in 8dp increments to ensure a consistent visual rhythm across screens.^[1]
• Component spacing: Component spacing defines the spatial relationships within a given component, like the distance between a button’s icon and label. If you don't maintain this spacing consistently across all the buttons on your page, it can be subconsciously jarring to users and look sloppy. Maintaining consistency here brings balance to your UI components, so take the time to establish rules for use across the entire product.