Spacing

System Overview

Spacing systems, grids, and layouts provide a series of rules and guidelines that give the interface a consistent rhythm. We have developed a class system for controlling margin and padding within the interface. These classes form a scale that serves to help you when placing elements onto a page.

The system comes with 12 sizes in total (counting 0 and auto) ranging from XXS to 5XL for both margin and padding. Margin has a unique set of sizes called auto, which sets the value of given margin direction to auto. Padding does not support this functionality.

Each property (margin & padding) is broken up into smaller properties:

• m, p - all
• mt, pt - top
• mb, pb - bottom
• ml, pl - left
• mr, pr - right
• mx, px - horizontal (left and right)
• my, py - vertical (top and bottom)

Margin & Padding

Margin

In CSS, margin properties are used to create space outside of elements. This means that when you apply margin to an element, it will apply it on the furthest edges of the element, outside of any defined borders.

You have full control over setting margins for each side of an element (top, right, bottom, and left).

• margin
• margin-top
• margin-right
• margin-bottom
• margin-left

In addition to this, margin properties can have the following values: 

• auto - browser calculates margin
• length - specifies a margin in units (we use rem units)

Note: Negative values for margin are allowed but there are no spacing classes with built-in functionality at the moment. If demand is needed, there will be future additions which add this functionality.

Padding

In CSS, padding properties are used to create space around an element's content. This means that when you apply margin to an element, it will apply it on the closest edges of the element's content, inside of any defined borders.

You have full control over setting paddings for each side of an element (top, right, bottom, and left).

• padding
• padding-top
• padding-right
• padding-bottom
• padding-left

In addition to this, margin properties can have the following values: 

• length - specifies a margin in units (we use rem units)

Note: Negative values for padding are not allowed.