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

# Core — margin

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

| Prop | Type | Description |
| --- | --- | --- |
| `$margin` | [spacing](/foundations/spacing) | Applies a margin to all sides of the element |
| `$marginTop` | [spacing](/foundations/spacing) | Applies a margin to the top of the element |
| `$marginBottom` | [spacing](/foundations/spacing) | Applies a margin to the bottom of the element |
| `$marginLeft` | [spacing](/foundations/spacing) | Applies a margin to the left of the element |
| `$marginRight` | [spacing](/foundations/spacing) | Applies a margin to the right of the element |
| `$marginX` | [spacing](/foundations/spacing) | Applies a margin to the left and right of the element |
| `$marginY` | [spacing](/foundations/spacing) | Applies a margin to the top and bottom of the element |