Spacing - Joystick Design System

Spacing refers to margin and padding. The base unit of all our spacing values is 4.

Most Joystick components do not have any spacing applied by default. These spacing utility classes help you quickly apply spacing to any component or element.
Classes prefixed by m- are used for adding margins. Classes prefixed in p- are used for adding padding.
The directions available for the spacing classes are top, right, bottom, and left.
You can use the vertical shortcut for both top and bottom, horizontal for both right and left, and around for all sides. Use the --xxx-small through --xx-large scale to choose the size needed.
Where vertical centering is required, check out our centered media object instead of applying extra margin or padding.

Margins

<div class="joy-m-top--none"></div>
<div class="joy-m-top--xxx-small"></div>
<div class="joy-m-top--xx-small"></div>
<div class="joy-m-top--x-small"></div>
<div class="joy-m-top--small"></div>
<div class="joy-m-top--medium"></div>
<div class="joy-m-top--large"></div>
<div class="joy-m-top--x-large"></div>
<div class="joy-m-top--xx-large"></div>
<div class="joy-m-right--none"></div>
<div class="joy-m-right--xxx-small"></div>
<div class="joy-m-right--xx-small"></div>
<div class="joy-m-right--x-small"></div>
<div class="joy-m-right--small"></div>
<div class="joy-m-right--medium"></div>
<div class="joy-m-right--large"></div>
<div class="joy-m-right--x-large"></div>
<div class="joy-m-right--xx-large"></div>
<div class="joy-m-bottom--none"></div>
<div class="joy-m-bottom--xxx-small"></div>
<div class="joy-m-bottom--xx-small"></div>
<div class="joy-m-bottom--x-small"></div>
<div class="joy-m-bottom--small"></div>
<div class="joy-m-bottom--medium"></div>
<div class="joy-m-bottom--large"></div>
<div class="joy-m-bottom--x-large"></div>
<div class="joy-m-bottom--xx-large"></div>
<div class="joy-m-left--none"></div>
<div class="joy-m-left--xxx-small"></div>
<div class="joy-m-left--xx-small"></div>
<div class="joy-m-left--x-small"></div>
<div class="joy-m-left--small"></div>
<div class="joy-m-left--medium"></div>
<div class="joy-m-left--large"></div>
<div class="joy-m-left--x-large"></div>
<div class="joy-m-left--xx-large"></div>
<div class="joy-m-vertical--none"></div>
<div class="joy-m-vertical--xxx-small"></div>
<div class="joy-m-vertical--xx-small"></div>
<div class="joy-m-vertical--x-small"></div>
<div class="joy-m-vertical--small"></div>
<div class="joy-m-vertical--medium"></div>
<div class="joy-m-vertical--large"></div>
<div class="joy-m-vertical--x-large"></div>
<div class="joy-m-vertical--xx-large"></div>
<div class="joy-m-horizontal--none"></div>
<div class="joy-m-horizontal--xxx-small"></div>
<div class="joy-m-horizontal--xx-small"></div>
<div class="joy-m-horizontal--x-small"></div>
<div class="joy-m-horizontal--small"></div>
<div class="joy-m-horizontal--medium"></div>
<div class="joy-m-horizontal--large"></div>
<div class="joy-m-horizontal--x-large"></div>
<div class="joy-m-horizontal--xx-large"></div>
<div class="joy-m-around--none"></div>
<div class="joy-m-around--xxx-small"></div>
<div class="joy-m-around--xx-small"></div>
<div class="joy-m-around--x-small"></div>
<div class="joy-m-around--small"></div>
<div class="joy-m-around--medium"></div>
<div class="joy-m-around--large"></div>
<div class="joy-m-around--x-large"></div>
<div class="joy-m-around--xx-large"></div>

Padding

<div class="joy-p-top--none"></div>
<div class="joy-p-top--xxx-small"></div>
<div class="joy-p-top--xx-small"></div>
<div class="joy-p-top--x-small"></div>
<div class="joy-p-top--small"></div>
<div class="joy-p-top--medium"></div>
<div class="joy-p-top--large"></div>
<div class="joy-p-top--x-large"></div>
<div class="joy-p-top--xx-large"></div>
<div class="joy-p-right--none"></div>
<div class="joy-p-right--xxx-small"></div>
<div class="joy-p-right--xx-small"></div>
<div class="joy-p-right--x-small"></div>
<div class="joy-p-right--small"></div>
<div class="joy-p-right--medium"></div>
<div class="joy-p-right--large"></div>
<div class="joy-p-right--x-large"></div>
<div class="joy-p-right--xx-large"></div>
<div class="joy-p-bottom--none"></div>
<div class="joy-p-bottom--xxx-small"></div>
<div class="joy-p-bottom--xx-small"></div>
<div class="joy-p-bottom--x-small"></div>
<div class="joy-p-bottom--small"></div>
<div class="joy-p-bottom--medium"></div>
<div class="joy-p-bottom--large"></div>
<div class="joy-p-bottom--x-large"></div>
<div class="joy-p-bottom--xx-large"></div>
<div class="joy-p-left--none"></div>
<div class="joy-p-left--xxx-small"></div>
<div class="joy-p-left--xx-small"></div>
<div class="joy-p-left--x-small"></div>
<div class="joy-p-left--small"></div>
<div class="joy-p-left--medium"></div>
<div class="joy-p-left--large"></div>
<div class="joy-p-left--x-large"></div>
<div class="joy-p-left--xx-large"></div>
<div class="joy-p-vertical--none"></div>
<div class="joy-p-vertical--xxx-small"></div>
<div class="joy-p-vertical--xx-small"></div>
<div class="joy-p-vertical--x-small"></div>
<div class="joy-p-vertical--small"></div>
<div class="joy-p-vertical--medium"></div>
<div class="joy-p-vertical--large"></div>
<div class="joy-p-vertical--x-large"></div>
<div class="joy-p-vertical--xx-large"></div>
<div class="joy-p-horizontal--none"></div>
<div class="joy-p-horizontal--xxx-small"></div>
<div class="joy-p-horizontal--xx-small"></div>
<div class="joy-p-horizontal--x-small"></div>
<div class="joy-p-horizontal--small"></div>
<div class="joy-p-horizontal--medium"></div>
<div class="joy-p-horizontal--large"></div>
<div class="joy-p-horizontal--x-large"></div>
<div class="joy-p-horizontal--xx-large"></div>
<div class="joy-p-around--none"></div>
<div class="joy-p-around--xxx-small"></div>
<div class="joy-p-around--xx-small"></div>
<div class="joy-p-around--x-small"></div>
<div class="joy-p-around--small"></div>
<div class="joy-p-around--medium"></div>
<div class="joy-p-around--large"></div>
<div class="joy-p-around--x-large"></div>
<div class="joy-p-around--xx-large"></div>