Chi Documentation

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}{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.

{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

Examples

Margins

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

<div class="-m2"></div>
<div class="-m4"></div>
<div class="-m6"></div>

Side Margins

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

<!-- margin-top -->
<div class="-mt3"></div>
<!-- margin-bottom -->
<div class="-mb3"></div>
<!-- margin-left -->
<div class="-ml3"></div>
<!-- margin-right -->
<div class="-mr3"></div>
<!-- margin-left and margin-right -->
<div class="-mx3"></div>
<!-- margin-top and margin-bottom -->
<div class="-my3"></div>

Padding

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

<div class="-p2"></div>
<div class="-p4"></div>
<div class="-p6"></div>

Side Paddings

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

<!-- padding-top -->
<div class="-pt3"></div>
<!-- padding-bottom -->
<div class="-pb3"></div>
<!-- padding-left -->
<div class="-pl3"></div>
<!-- padding-right -->
<div class="-pr3"></div>
<!-- padding-left and padding-right -->
<div class="-px3"></div>
<!-- padding-top and padding-bottom -->
<div class="-py3"></div>

Margin + Padding

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

<div class="-m3 -p3"></div>