Utilities for spacing elements.

How It Works

Assign padding and margin value to an element or some of its sides. Support for individual properties, all properties, and vertical and horizontal properties is included.

Notation

The classes are named {property}{sides}-{size}.

Where property is one of:

  • m - for classes that set the margin
  • p - for classes that set the padding

Where sides is one of:

  • t - for classes that set the -top
  • r - for classes that set the -right
  • b - for classes that set the -bottom
  • l - for classes that set the -left
  • x - for classes that set the -left and -right
  • y - for classes that set the -top and -bottom

Where size is one of:

  • 0 - for classes that eliminate the margin or padding by setting it to 0
  • 1 - for classes that set the margin or padding to @spacer * 0.25
  • 2 - for classes that set the margin or padding to @spacer * 0.5
  • 3 - for classes that set the margin or padding to @spacer * 1.0
  • 4 - for classes that set the margin or padding to @spacer * 1.5
  • 5 - for classes that set the margin or padding to @spacer * 3.0