Spacing

Utility classes for margins and padding

Naming Convention

The naming convention for spacing utilities was constructed with the goal of being both semantic and easy to remember. For uniform margins and padding, the location is omitted from the name.

Type Location Size
margin top, right, bottom, left, x (horizontal), y (vertical) 0 - 12 and auto
padding top, right, bottom, left, x (horizontal), y (vertical) 0 - 12 and auto

Margin

Based on a global spacing scale which helps keep horizontal and vertical spacing consistent, margin utilities help reduce the amount of custom CSS that share the same properties and allows for many different page layouts using the same styles.

Uniform Margins

Uniform spacing utilities are used to apply equal margins to all sides of an element, can change or override default margins and can be used with a spacing scale from 0-12.