---
title: "Core — padding"
canonical: https://sky-ui.cf.sky.com/core/system/padding
---

# Core — padding

Applying the `padding` system modifier to your component will allow consumers of your component to pass in the following props:

| Property | Type | Description |
| --- | --- | --- |
| `$padding` | [spacing](/foundations/spacing) | Applies a padding to all sides of the element |
| `$paddingTop` | [spacing](/foundations/spacing) | Applies a padding to the top of the element |
| `$paddingBottom` | [spacing](/foundations/spacing) | Applies a padding to the bottom of the element |
| `$paddingLeft` | [spacing](/foundations/spacing) | Applies a padding to the left of the element |
| `$paddingRight` | [spacing](/foundations/spacing) | Applies a padding to the right of the element |
| `$paddingX` | [spacing](/foundations/spacing) | Applies a padding to the left and right of the element |
| `$paddingY` | [spacing](/foundations/spacing) | Applies a padding to the top and bottom of the element |