# Spacing

A key component in working with layouts is the correct usage of space in placing and separating different elements. This is especially important when developers are trying to replicate the spacing used in a mockup exactly into the final layout. 

To create the spacing system for Sipster, we opted for a 4px base size and its multiples, which offers developers and end users a harmonious, vertical scale, which leads to more visually consistent layouts.

To use this feature, you only need to apply the function `sds-spc("value")`, replacing the param for any of the values listed in the following table.

| values        | pixel size       | rem size  |
| ------------- | ---------------- | --------- |
| Spacing Value | Pixel Equivalent | REM value |
| 4             | 4 px             | 0.25 rem  |
| 8             | 8 px             | 0.5 rem   |
| 12            | 12 px            | 0.75 rem  |
| 16            | 16 px            | 1 rem     |
| 24            | 24 px            | 1.5 rem   |
| 32            | 32 px            | 2 rem     |
| 40            | 40 px            | 2.5 rem   |
| 64            | 64 px            | 4 rem     |

{% hint style="info" %}
This function can be used inside any CSS property where spacing/an integer can be implemented.
{% endhint %}

### Examples: 

```scss
.link {
  margin: sds-spc(12) sds-spc(16);
}


//--------------
// Compiled CSS
//--------------

.link {
  margin: 12px 16px;
}
```

```scss
button {
  padding: sds-spc(12);
}


//--------------
// Compiled CSS
//--------------

button {
  padding: 12px;
}
```