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
![Spacing system in a table shown in rems, pixels and visual example](https://designsystem-live-storagesta-assetstorages3bucket-twdgvto300q.s3.amazonaws.com/s3fs-public/2023-02/Spacing%20blocks.png?VersionId=.av9NLpuKTH8ey_kjxoRmsgdQWoLdtvz)