Spacers

By default, all controls and HTML elements have responsive top margins. If you need to add or modify the spacing between elements, use the following utility classes, mixin, or function. We recommend you don't add bottom margins or padding to an element. Instead, add a top margin or padding to the element below it.

Spacer classes

{{#markdown}} ```xml ``` {{/markdown}}

A spacer class is constructed using the following available arguments:

Properties

  • m margin
  • p padding

Directions

  • t top
  • r right
  • b bottom
  • l left
  • v vertical: top and bottom
  • h horizontal: left and right
  • [empty] all: top, right, bottom, and left

Sizes

{{> spacer-sizes showPixelValues=true }}

Examples

Add medium size right margin:

{{#markdown}} ```xml ``` {{/markdown}}

Add small padding to all sides:

{{#markdown}} ```xml ``` {{/markdown}}

Sass mixin

This mixin is used to generate the spacer classes above. You can use it to set margins and padding in Sass.

{{#markdown}} ```scss .selector { @include spacer( property, direction, size ); } ``` {{/markdown}}

A mixin class must be constructed using the following available arguments:

Properties

  • margin
  • padding

Directions

  • top
  • right
  • bottom
  • left
  • vertical
  • horizontal
  • all

Sizes

{{> spacer-sizes }}

Examples

Add a medium size top margin:

{{#markdown}} ```scss .selector { @include spacer( margin, top, md ); } ``` {{/markdown}}

Add extra small top and bottom padding:

{{#markdown}} ```scss .selector { @include spacer( padding, vertical, xs ); } ``` {{/markdown}}

Sass function

This function is used by the above mixin to get the correct spacing value for each size. The size argument is required. shim is optional.

{{#markdown}} ```scss .selector { property: spacing( size, shim ); } ``` {{/markdown}}

size must be one of the following:

{{> spacer-sizes }}

Examples

Set a small size top padding:

{{#markdown}} ```scss .selector { padding-top: spacing( sm ); } ``` {{/markdown}}

Set large left and right margins:

{{#markdown}} ```scss .selector { margin: 0 spacing( lg ); } ``` {{/markdown}}