Spacing

Update your layout without creating new classes. Spacing helpers are useful for modifying the padding and margin of an element.

How it works

Apply margin or padding to an element ranging from 0 to 5. Each size increment was designed to align with common Material Design spacing. 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 property for margin-top or padding-top

  • b - applies the property for margin-bottom or padding-bottom

  • l - applies the property for margin-left or padding-left

  • r - applies the property for margin-right or padding-right

  • x - applies the property for both *-left and *-right

  • y - applies the property for both *-top and *-bottom

  • a - applies the property for margin or padding in all directions

The size controls the increment of the property:

  • 0 - removes the property for margin or padding by setting it to 0

  • 1 - sets the margin or padding property to $spacer * .25

  • 2 - sets the margin or padding property to $spacer * .5

  • 3 - sets the margin or padding property to $spacer

  • 4 - sets the margin or padding property to $spacer * 1.5

  • 5 - sets the margin or padding property to $spacer * 3

Examples

$spacer := 16px

.mt-5
  margin-top: ($spacer * 3) !important

.py-2
  padding-left: ($spacer * .5) !important
  padding-right: ($spacer * .5) !important

.pa-1
  padding: ($spacer * .25) !important

.mx-3
  margin-right: $spacer !important
  margin-left: $spacer !important

Horizontal centering

For block elements with a designated width, you can apply .mx-auto to horizontally center the content.