Spacing is an important part of clear, functional layouts of web pages. Without spacing, content would be grouped without a clear structure, and hierarchy and relationships between elements would be unclear to the user.
In order to keep the spacing consistent across our products, we created a spacing system. This allows us to take the guess work out of creating clearly structured pages, and enables users to see a familiar structured page with a focus on the information they need to absorb.
The spacing system is based on the 16px baseline size for 1 rem.
We use two types of spacing:
- Padding - spacing inside an element
- Margins - spacing surrounding an element
