Spacing

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

Type: Either margin (m) or padding (p)
Position:
- a = All
- t = Top
- r = Right
- b = Bottom
- l = Left
- x = x axis or Left & Right
- y = y axis or Top & Bottom
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

Sample

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.

Margin

Padding

Content

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%