# Spacing system

The helper classes apply margin or padding to an element ranging from 0 to 5. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format {property}{direction}-{size}.

The property applies the type of spacing:

• m - applies margin
• p - applies padding

The direction designates the side the property applies to:

• t - applies the spacing for -top
• b - applies the spacing for -bottom
• l - applies the spacing for -left
• r - applies the spacing for -right
• x - applies the spacing for both -left and -right
• y - applies the spacing for both -top and -bottom
• blank - applies the spacing for all sides

The size controls the increment of the property:

• auto - sets the spacing to auto
• 0 - removes the spacing by setting it to 0
• 1 - sets the spacing to .25rem
• 2 - sets the spacing to .5rem
• 3 - sets the spacing to 1rem
• 4 - sets the spacing to 1.5rem
• 5 - sets the spacing to 3rem

# Examples

# p-3 + mx-auto

# pl-3 + my-3

# px3 + ml-3 + mb-5 + mt-1