# Margins

The majority of these settings should get left as default. However, if you feel confident, feel free to adjust and change the parameters.

Adjusting “**margins**” will change the space around elements.

![1 px margin — gap between boxes](https://2358617368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEq8xhuy5FBVNQlaWUVc7%2Fuploads%2FNIr5bANofcg4XHTjXTkX%2Fimage.png?alt=media\&token=d725a60f-1a50-4a5b-900d-594b9c5a738a) ![5 px margin — gap between boxes](https://2358617368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEq8xhuy5FBVNQlaWUVc7%2Fuploads%2FqpUkFjC4LTkVjEAtCovo%2Fimage.png?alt=media\&token=576c3c61-adb3-4b98-b405-cf5bd495d596) ![10 px margin — gap between elements](https://2358617368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEq8xhuy5FBVNQlaWUVc7%2Fuploads%2FuPaMTfwRvXMlLPOvQrsZ%2Fimage.png?alt=media\&token=c34a1df7-603f-414e-b866-4b47ff91ec8d) ![20 px margin — gap between elements](https://2358617368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEq8xhuy5FBVNQlaWUVc7%2Fuploads%2F9I79zYHRTJuVwa9oA0Dj%2Fimage.png?alt=media\&token=dd78beba-7a81-420e-8a69-2ec196f851b1)

When unspecified, margin is applied equally around elements. The margin property has four values.

* top margin
* right margin
* bottom margin
* left margin

```jsx
"margin": "0.2rem", // a single value means space is equal
```

### Other values:

```javascript
// Use these variables for creating space around elements
// You can use all of them or the desired side 

"margin-top": "5px", // Create margin above elements
"margin-bottom": "5px", // Create margin below elements
"margin-right": "5px", // Create margin to the right of elements
"margin-left": "5px", // Create margin to the left of elements
```

```javascript
"margin": "0.5em", // a single value means space is equal
```

```javascript
"margin": "10% 0",
```

```javascript
"margin": "10px 5px 10px", // top , sides , bottom
```

```javascript
"margin": "5px 10px 5px 10px", // top, right, bottom, left (Clockwise)
```

{% hint style="success" %}
Values can be used individually.
{% endhint %}

```javascript
"margin": "0", // no margins around the element
```