# Padding

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

When you adjust “**padding**” the space around content and borders will change.

![1 px padding — green line](https://2358617368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEq8xhuy5FBVNQlaWUVc7%2Fuploads%2FuGUXHNahI6FXQZocu2Mb%2Fimage.png?alt=media\&token=41e1f314-ce6a-4198-98aa-f53785cdf006) ![5 px padding — green line](https://2358617368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEq8xhuy5FBVNQlaWUVc7%2Fuploads%2FWVZUrxk2yyjPDwmi5jG6%2Fimage.png?alt=media\&token=168f3b1f-d3b8-4068-817c-8b504c748ca1) ![10 px padding — green line](https://2358617368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEq8xhuy5FBVNQlaWUVc7%2Fuploads%2FrAbCGYqr7WkGooet6wBb%2Fimage.png?alt=media\&token=aaabc6b8-d116-4eeb-a339-3f822c176738) ![20 px padding — green line](https://2358617368-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FEq8xhuy5FBVNQlaWUVc7%2Fuploads%2FOUc5d1kuSDQiqamXO6uX%2Fimage.png?alt=media\&token=46268b88-fe10-40a0-9978-3d6454ffea0b)

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

* top padding
* right padding
* bottom padding
* left padding

```jsx
"padding": "0.3rem", // a single value means space is equal
```

### Other values:

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

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

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

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

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

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

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

```javascript
"padding": "0", // no padding around the element
```