Margin

Use the spacing scale to set margins on every side, one side, or an axis. Margins can also be negative or auto.

Sass mixins

Pass $negative: true, or use a minus-* mixin, for negative margins.

Mixin	CSS properties
m($key, $negative: false)	margin
mt($key, $negative: false)	margin-top
mb($key, $negative: false)	margin-bottom
ml($key, $negative: false)	margin-left
mr($key, $negative: false)	margin-right
mx($key, $negative: false)	margin-left, margin-right
my($key, $negative: false)	margin-top, margin-bottom
minus-m($key), minus-mt($key), minus-mb($key)	Negative all, top, or bottom margin
minus-ml($key), minus-mr($key)	Negative left or right margin
minus-mx($key), minus-my($key)	Negative horizontal or vertical margin
m-auto, mx-auto, my-auto	Auto margin on all, horizontal, or vertical sides
mt-auto, mb-auto, ml-auto, mr-auto	Auto margin on one side

Responsive range mixins

Pass a base size followed by named breakpoint overrides, such as crayon.m-range(4, $md: 8, $lg: 12).

Mixin	Purpose
m-range($base, $breakpoint-range...)	Responsive margin
mt-range($base, $breakpoint-range...)	Responsive top margin
mb-range($base, $breakpoint-range...)	Responsive bottom margin
ml-range($base, $breakpoint-range...)	Responsive left margin
mr-range($base, $breakpoint-range...)	Responsive right margin
mx-range($base, $breakpoint-range...)	Responsive horizontal margin
my-range($base, $breakpoint-range...)	Responsive vertical margin

Utility classes

Class	Property
m-0, m-none	margin: 0
mx-0, mx-none	margin-left: 0; margin-right: 0
my-0, my-none	margin-top: 0; margin-bottom: 0
mt-0, mt-none	margin-top: 0
mr-0, mr-none	margin-right: 0
mb-0, mb-none	margin-bottom: 0
ml-0, ml-none	margin-left: 0
m-{size}	margin: {size}
mx-{size}	margin-left: {size}; margin-right: {size}
my-{size}	margin-top: {size}; margin-bottom: {size}
mt-{size}	margin-top: {size}
mr-{size}	margin-right: {size}
mb-{size}	margin-bottom: {size}
ml-{size}	margin-left: {size}
-m-{size}	margin: -{size}
-mx-{size}	margin-left: -{size}; margin-right: -{size}
-my-{size}	margin-top: -{size}; margin-bottom: -{size}
-mt-{size}	margin-top: -{size}
-mr-{size}	margin-right: -{size}
-mb-{size}	margin-bottom: -{size}
-ml-{size}	margin-left: -{size}
m-auto	margin: auto
mx-auto, center, center-x	margin-left: auto; margin-right: auto
my-auto, center-y	margin-top: auto; margin-bottom: auto
mt-auto	margin-top: auto
mr-auto	margin-right: auto
mb-auto	margin-bottom: auto
ml-auto	margin-left: auto

Examples

Sass mixins

scss

.card {
  @include crayon.m(4);
  @include crayon.mx-auto;
}

sass

.card
  +crayon.m(4)
  +crayon.mx-auto

Utility classes

<div class="m-4">Margin on all sides</div>
<div class="mx-auto">Centred with auto margins</div>
<div class="center">The same horizontal centering using an alias</div>
<div class="center-y">Automatic vertical margins</div>
<div class="-mt-4">Negative top margin</div>

Sass functions

scss

.card {
  margin: crayon.size(4);
  margin-top: -(crayon.size(2));
}

sass

.card
  margin: crayon.size(4)
  margin-top: -(crayon.size(2))

CSS variables

.card {
  margin: var(--size-4);
  margin-top: calc(var(--size-2) * -1);
}