Types of spacing
There are several types of spacing we can use to place elements within layouts and components. Although you’re most likely going to use them all when designing your products, it’s important to know what types of spacing are commonly used.
Padding
Padding is the distance between the edge of an element and its content. It can be specified horizontally, vertically, or both.
The example above shows a 20px left and right padding, which is part of our Button component.
Margins
Margins are the distances between components and can be applied vertically and horizontally. They define the relationship between components, layout and viewport size.
The example above shows a 20px margin between two buttons.
Dimensions
Dimensions describe the overall width and height of a component or design element. While vertical dimensions should always stick to our spacing scale, horizontal dimensions are not specified because they are responsive to the grids width.
The example above shows how a primary button’s width spans across 335px to fit the width of the mobile grid
Element first approach
Our main approach for designing components can be categorised as ‘element-first’. This means that the sizing of components and design elements takes priority when matched to our predetermined spatial system. We follow this approach to keep a consistent rhythm within the overall composition and layout of our designs.
For instance, an element might be set to always have a height of 50px, regardless of the content found inside it. This means that if the component has different variations (like different typographic sizes) it will always preserve a 50px height, and it’s internal padding will change to accommodate the difference in height.
The top and bottom padding for this button are set to 9px, which isn’t part of our spacing scale. However, this is done to preserve the overall height of the button height of 50px, which is a measure within our spacing scale.