Canvas Docs

Spacing

Spacing

Canvas uses Bootstrap 5 margin and padding utilities and extends the scale with an extra step (6).

Notation

{property}{side}-{size}

  • Property: m (margin) or p (padding)
  • Side: t top, b bottom, s start (left), e end (right), x left and right, y top and bottom, or blank for all sides
  • Size: 0 through 6, or auto
Size Value
0 0
1 0.25rem
2 0.5rem
3 1rem
4 1.5rem
5 3rem
6 Canvas extra step

Sides

Class stem Applies to
.m-* / .p-* all sides
.mt-* / .pt-* top
.mb-* / .pb-* bottom
.ms-* / .ps-* start (left)
.me-* / .pe-* end (right)
.mx-* / .px-* horizontal
.my-* / .py-* vertical

Negative margins

Canvas supports negative margins: .m-n1 through .m-n6, plus per-side variants like .mt-n3, .mb-n5, .mx-n4.

Responsive

Every spacing utility takes a breakpoint infix: .mt-md-4, .px-lg-5, .mb-xl-6, .py-sm-2.

Usage

<div class="p-4 p-lg-5 mb-4">
  <h2 class="mt-0 mb-3">Heading</h2>
  <p class="mb-0">Body copy with no bottom margin.</p>
</div>

<!-- center a block horizontally -->
<div class="mx-auto" style="max-width: 640px;">Centered</div>

<!-- pull an element up with a negative margin -->
<div class="mt-n4">Overlaps the element above.</div>

Classes

ClassDescription
.m*-6 & .p*-6Enhanced Spacing classes for extra spacing.
Example: &lt;div class="mt-6"&gt;&lt;/div&gt;
More Spacing ClassesMore Spacing Utility Classes can be found here: https://getbootstrap.com/docs/5.3/utilities/spacing/ .

Canvas provides an Additional Extension Spacing Classes of .m-6 and .p-6 with a 5rem/80px Spacing and works in the same way as the Bootstrap Spacing Utility Classes.
Was this page helpful?