Spacing

Use shorthand margin and padding utility classes to control spacing between elements.

Notation #

Spacing utility classes can be defined using the format -{property}{sides}[-{breakpoint}]--{size}.

{property} #

  • m - use to apply margin
  • p - use to apply padding

{sides} #

  • t - use to apply margin-top or padding-top
  • b - use to apply margin-bottom or padding-bottom
  • l - use to apply margin-left or padding-left
  • r - use to apply margin-right or padding-right
  • x - use to apply margin-left and margin-right or padding-left and padding-right
  • y - use to apply margin-top and margin-bottom or padding-top and padding-bottom
  • blank - leave blank to apply margin or padding to all 4 sides.

{breakpoint} #

Optionally, include -{breakpoint} to apply the utility behaviour to some breakpoints. As a mobile-first library, any applying to smaller breakpoints will also modify larger ones unless another class overrides this behaviour.

  • blank - leave blank to apply margin or padding to all breakpoints.
  • sm - use to apply margin or padding to sm and larger breakpoints.
  • md - use to apply margin or padding to md and larger breakpoints.
  • lg - use to apply margin or padding to lg and larger breakpoints.
  • xl - use to apply margin or padding to xl breakpoints.

{size} #

  • 0 - use to eliminate existing margin or padding and set to 0
  • 1 - use to set margin or padding to $base-unit
  • 2 - use to set margin or padding to $base-unit * 2
  • 3 - use to set margin or padding to $base-unit * 3
  • 4 - use to set margin or padding to $base-unit * 4
  • 5 - use to set margin or padding to $base-unit * 5
  • 6 - use to set margin or padding to $base-unit * 6
  • 7 - use to set margin or padding to $base-unit * 7
  • 8 - use to set margin or padding to $base-unit * 8
  • 9 - use to set margin or padding to $base-unit * 9
  • 10 - use to set margin or padding to $base-unit * 10
  • auto - use to set margin to auto value

Examples #

Margins #

In this example, various margin classes have been applied to render margin on all 4 sides of the blue squares. The margin can be visualized in blue.

Side Margins #

Apply margin to specific sides of an element by adding t, b, l, r, x or y to the class name.

Padding #

In this example, various padding classes have been applied to render padding on all 4 sides of the blue squares. The padding can be visualized in yellow.

Side Paddings #

Apply padding to specific sides of an element by adding t, b, l, r, x or y to the class name.

Margin + Padding #

Apply both margin and padding to an element by adding both class names.

Auto margin #

Apply margin auto to an element

Breakpoints #

Target specific breakpoints with responsive classes.