The spacing class uses:

  • Margins that create space around elements, and
  • Padding that creates space around an element’s content
Assign shorthand classes margin or padding to add additional spacing to webpage elements.

Using the spacing class

The spacing class is made of three parts:

m - a - lg
| | |
type position size
  1. Type: Either margin (m) or padding (p)
  2. Position:
    • a = All
    • t = Top
    • r = Right
    • b = Bottom
    • l = Left
    • x = x axis or Left & Right
    • y = y axis or Top & Bottom
  3. Size: You can specify how much padding or margin an element receives. In addition to a custom size, you can use these common sizes:
    • 0: No spacing
    • Blank: Base size or 1rem
    • sm: .5rem
    • md: 1.5rem
    • lg: 3rem


Here is a sample of a card using the spacing class with all three parts.

<card class="m-a-lg p-x-100 p-y-lg">

Margin is 3 rem on all sides. Padding is 6 rem on the x-axis and 3 rem on the y-axis.


This code sample illustrates the spacing classes used in the example

  • m-a-lg defines a large margin for all axis
  • p-x-100 is setting the left and right padding to 6 rem
  • p-y-lg is setting the top and bottom padding to a large height (3 rem)

For more shortcuts, review Utility CSS classes.

Spacing class shortcuts

Class Description
.m-a-0 margin all 0
.m-t-0 margin top 0
.m-b-0 margin bottom 0
.m-r-0 margin right 0
.m-l-0 margin left 0
.m-x-0 margin left and right 0
.m-y-0 margin top and bottom 0
.m-a margin all 1rem
.m-t margin top 1rem
.m-b margin bottom 1rem
.m-r margin right 1rem
.m-l margin left 1rem
.m-x margin left and right 1rem
.m-y margin top and bottom 1rem
.m-x-auto margin right and left auto
.m-a-sm margin all .5rem
.m-t-sm margin top .5rem
.m-b-sm margin bottom .5rem
.m-r-sm margin right .5rem
.m-l-sm margin left .5rem
.m-x-sm margin left and right .5rem
.m-y-sm margin top and bottom .5rem
.m-a-md margin all 1.5rem
.m-t-md margin top 1.5rem
.m-b-md margin bottom 1.5rem
.m-r-md margin right 1.5rem
.m-l-md margin left 1.5rem
.m-x-md margin left and right 1.5rem
.m-y-md margin top and bottom 1.5rem
.m-a-lg margin all 3rem
.m-t-lg margin top 3rem
.m-b-lg margin bottom 3rem
.m-r-lg margin right 3rem
.m-l-lg margin left 3rem
.m-x-lg margin left and right 3rem
.m-y-lg margin top and bottom 3rem
.m-t-60 margin top 4rem (~60px)
.m-t-80 margin top 5rem (~80px)
.m-t-100 margin top 6rem (~100px)
.m-b-60 margin bottom 4rem (~60px)
.m-b-80 margin bottom 5rem (~80px)
.m-b-100 margin bottom 6rem (~100px)
.p-a-0 padding all 0
.p-t-0 padding top 0
.p-b-0 padding bottom 0
.p-r-0 padding right 0
.p-l-0 padding left 0
.p-x-0 padding left and right 0
.p-y-0 padding top and bottom 0
.p-a padding all 1rem
.p-t padding top 1rem
.p-b padding bottom 1rem
.p-r padding right 1rem
.p-l padding left 1rem
.p-x padding left and right 1rem
.p-y padding top and bottom 1rem
.p-a-sm padding all .5rem
.p-t-sm padding top .5rem
.p-b-sm padding bottom .5rem
.p-r-sm padding right .5rem
.p-l-sm padding left .5rem
.p-x-sm padding left and right .5rem
.p-y-sm padding top and bottom .5rem
.p-a-md padding all 1.5rem
.p-t-md padding top 1.5rem
.p-b-md padding bottom 1.5rem
.p-r-md padding right 1.5rem
.p-l-md padding left 1.5rem
.p-x-md padding left and right 1.5rem
.p-y-md padding top and bottom 1.5rem
.p-a-lg padding all 3rem
.p-t-lg padding top 3rem
.p-b-lg padding bottom 3rem
.p-r-lg padding right 3rem
.p-l-lg padding left 3rem
.p-x-lg padding left and right 3rem
.p-y-lg padding top and bottom 3rem
.p-t-60 padding top 4rem (~60px)
.p-t-80 padding top 5rem (~80px)
.p-t-100 padding top 6rem (~100px)
.p-b-60 padding bottom 4rem (~60px)
.p-b-80 padding bottom 5rem (~80px)
.p-b-100 padding bottom 6rem (~100px)
.left-0 left 0
.left-sm left .5rem
.left-n left 1rem
.left-md left 1.5rem
.left-lg left 3rem
.right-0 right 0
.right-sm right .5rem
.right-n right 1rem
.right-md right 1.5rem
.right-lg right 3rem
.top-0 top 0
.top-sm top .5rem
.top-n top 1rem
.top-md top 1.5rem
.top-lg top 3rem
.top-minus-5 top -5px
.top-minus-3 top -3px
.top-minus-2 top -2px
.top-minus-1 top -1px
.top-5pct top 5%
.top-10pct top 10%
.top-20pct top 20%
.top-30pct top 30%
.top-40pct top 40%
.top-50pct top 50%
.top-60pct top 60%
.top-70pct top 70%
.top-80pct top 80%
.top-90pct top 90%
.top-100pct top 100%
.bottom-0 bottom 0
.bottom-sm bottom .5rem
.bottom-n bottom 1rem
.bottom-md bottom 1.5rem
.bottom-lg bottom 3rem
.bottom-minus-5 bottom -5px
.bottom-minus-3 bottom -3px
.bottom-minus-2 bottom -2px
.bottom-minus-1 bottom -1px
.bottom-5pct bottom 5%
.bottom-10pct bottom 10%
.bottom-20pct bottom 20%
.bottom-30pct bottom 30%
.bottom-40pct bottom 40%
.bottom-50pct bottom 50%
.bottom-60pct bottom 60%
.bottom-70pct bottom 70%
.bottom-80pct bottom 80%
.bottom-90pct bottom 90%
.bottom-100pct bottom 100%