BlogPlaygroundOne

Spacing

Update your layout without creating new classes. Spacing helpers are useful for modifying the padding and margin of an element.

Edit this page
Report a Bug
Copy Page as Markdown
ClassProperties
ga-0gap: 0;
ga-1gap: 4px;
ga-2gap: 8px;
ga-3gap: 12px;
ga-4gap: 16px;
ga-5gap: 20px;
ga-6gap: 24px;
ga-7gap: 28px;
ga-8gap: 32px;
ga-9gap: 36px;
ga-10gap: 40px;
ga-11gap: 44px;
ga-12gap: 48px;
ga-13gap: 52px;
ga-14gap: 56px;
ga-15gap: 60px;
ga-16gap: 64px;
ma-0margin: 0;
ma-1margin: 4px;
ma-2margin: 8px;
ma-3margin: 12px;
ma-4margin: 16px;
ma-5margin: 20px;
ma-6margin: 24px;
ma-7margin: 28px;
ma-8margin: 32px;
ma-9margin: 36px;
ma-10margin: 40px;
ma-11margin: 44px;
ma-12margin: 48px;
ma-13margin: 52px;
ma-14margin: 56px;
ma-15margin: 60px;
ma-16margin: 64px;
ml-0margin-left: 0;
ml-1margin-left: 4px;
ml-2margin-left: 8px;
ml-3margin-left: 12px;
ml-4margin-left: 16px;
ml-5margin-left: 20px;
ml-6margin-left: 24px;
ml-7margin-left: 28px;
ml-8margin-left: 32px;
ml-9margin-left: 36px;
ml-10margin-left: 40px;
ml-11margin-left: 44px;
ml-12margin-left: 48px;
ml-13margin-left: 52px;
ml-14margin-left: 56px;
ml-15margin-left: 60px;
ml-16margin-left: 64px;
ms-0margin-left: 0; (LTR) / margin-right: 0; (RTL)
ms-1margin-left: 4px; (LTR) / margin-right: 4px; (RTL)
ms-2margin-left: 8px; (LTR) / margin-right: 8px; (RTL)
ms-3margin-left: 12px; (LTR) / margin-right: 12px; (RTL)
ms-4margin-left: 16px; (LTR) / margin-right: 16px; (RTL)
ms-5margin-left: 20px; (LTR) / margin-right: 20px; (RTL)
ms-6margin-left: 24px; (LTR) / margin-right: 24px; (RTL)
ms-7margin-left: 28px; (LTR) / margin-right: 28px; (RTL)
ms-8margin-left: 32px; (LTR) / margin-right: 32px; (RTL)
ms-9margin-left: 36px; (LTR) / margin-right: 36px; (RTL)
ms-10margin-left: 40px; (LTR) / margin-right: 40px; (RTL)
ms-11margin-left: 44px; (LTR) / margin-right: 44px; (RTL)
ms-12margin-left: 48px; (LTR) / margin-right: 48px; (RTL)
ms-13margin-left: 52px; (LTR) / margin-right: 52px; (RTL)
ms-14margin-left: 56px; (LTR) / margin-right: 56px; (RTL)
ms-15margin-left: 60px; (LTR) / margin-right: 60px; (RTL)
ms-16margin-left: 64px; (LTR) / margin-right: 64px; (RTL)
mt-0margin-top: 0;
mt-1margin-top: 4px;
mt-2margin-top: 8px;
mt-3margin-top: 12px;
mt-4margin-top: 16px;
mt-5margin-top: 20px;
mt-6margin-top: 24px;
mt-7margin-top: 28px;
mt-8margin-top: 32px;
mt-9margin-top: 36px;
mt-10margin-top: 40px;
mt-11margin-top: 44px;
mt-12margin-top: 48px;
mt-13margin-top: 52px;
mt-14margin-top: 56px;
mt-15margin-top: 60px;
mt-16margin-top: 64px;
mr-0margin-right: 0;
mr-1margin-right: 4px;
mr-2margin-right: 8px;
mr-3margin-right: 12px;
mr-4margin-right: 16px;
mr-5margin-right: 20px;
mr-6margin-right: 24px;
mr-7margin-right: 28px;
mr-8margin-right: 32px;
mr-9margin-right: 36px;
mr-10margin-right: 40px;
mr-11margin-right: 44px;
mr-12margin-right: 48px;
mr-13margin-right: 52px;
mr-14margin-right: 56px;
mr-15margin-right: 60px;
mr-16margin-right: 64px;
me-0margin-right: 0; (LTR) / margin-left: 0; (RTL)
me-1margin-right: 4px; (LTR) / margin-left: 4px; (RTL)
me-2margin-right: 8px; (LTR) / margin-left: 8px; (RTL)
me-3margin-right: 12px; (LTR) / margin-left: 12px; (RTL)
me-4margin-right: 16px; (LTR) / margin-left: 16px; (RTL)
me-5margin-right: 20px; (LTR) / margin-left: 20px; (RTL)
me-6margin-right: 24px; (LTR) / margin-left: 24px; (RTL)
me-7margin-right: 28px; (LTR) / margin-left: 28px; (RTL)
me-8margin-right: 32px; (LTR) / margin-left: 32px; (RTL)
me-9margin-right: 36px; (LTR) / margin-left: 36px; (RTL)
me-10margin-right: 40px; (LTR) / margin-left: 40px; (RTL)
me-11margin-right: 44px; (LTR) / margin-left: 44px; (RTL)
me-12margin-right: 48px; (LTR) / margin-left: 48px; (RTL)
me-13margin-right: 52px; (LTR) / margin-left: 52px; (RTL)
me-14margin-right: 56px; (LTR) / margin-left: 56px; (RTL)
me-15margin-right: 60px; (LTR) / margin-left: 60px; (RTL)
me-16margin-right: 64px; (LTR) / margin-left: 64px; (RTL)
mb-0margin-bottom: 0;
mb-1margin-bottom: 4px;
mb-2margin-bottom: 8px;
mb-3margin-bottom: 12px;
mb-4margin-bottom: 16px;
mb-5margin-bottom: 20px;
mb-6margin-bottom: 24px;
mb-7margin-bottom: 28px;
mb-8margin-bottom: 32px;
mb-9margin-bottom: 36px;
mb-10margin-bottom: 40px;
mb-11margin-bottom: 44px;
mb-12margin-bottom: 48px;
mb-13margin-bottom: 52px;
mb-14margin-bottom: 56px;
mb-15margin-bottom: 60px;
mb-16margin-bottom: 64px;
ma-n1margin: -4px;
ma-n2margin: -8px;
ma-n3margin: -12px;
ma-n4margin: -16px;
ma-n5margin: -20px;
ma-n6margin: -24px;
ma-n7margin: -28px;
ma-n8margin: -32px;
ma-n9margin: -36px;
ma-n10margin: -40px;
ma-n11margin: -44px;
ma-n12margin: -48px;
ma-n13margin: -52px;
ma-n14margin: -56px;
ma-n15margin: -60px;
ma-n16margin: -64px;
ml-n1margin-left: -4px;
ml-n2margin-left: -8px;
ml-n3margin-left: -12px;
ml-n4margin-left: -16px;
ml-n5margin-left: -20px;
ml-n6margin-left: -24px;
ml-n7margin-left: -28px;
ml-n8margin-left: -32px;
ml-n9margin-left: -36px;
ml-n10margin-left: -40px;
ml-n11margin-left: -44px;
ml-n12margin-left: -48px;
ml-n13margin-left: -52px;
ml-n14margin-left: -56px;
ml-n15margin-left: -60px;
ml-n16margin-left: -64px;
ms-n1margin-left: -4px; (LTR) / margin-right: -4px; (RTL)
ms-n2margin-left: -8px; (LTR) / margin-right: -8px; (RTL)
ms-n3margin-left: -12px; (LTR) / margin-right: -12px; (RTL)
ms-n4margin-left: -16px; (LTR) / margin-right: -16px; (RTL)
ms-n5margin-left: -20px; (LTR) / margin-right: -20px; (RTL)
ms-n6margin-left: -24px; (LTR) / margin-right: -24px; (RTL)
ms-n7margin-left: -28px; (LTR) / margin-right: -28px; (RTL)
ms-n8margin-left: -32px; (LTR) / margin-right: -32px; (RTL)
ms-n9margin-left: -36px; (LTR) / margin-right: -36px; (RTL)
ms-n10margin-left: -40px; (LTR) / margin-right: -40px; (RTL)
ms-n11margin-left: -44px; (LTR) / margin-right: -44px; (RTL)
ms-n12margin-left: -48px; (LTR) / margin-right: -48px; (RTL)
ms-n13margin-left: -52px; (LTR) / margin-right: -52px; (RTL)
ms-n14margin-left: -56px; (LTR) / margin-right: -56px; (RTL)
ms-n15margin-left: -60px; (LTR) / margin-right: -60px; (RTL)
ms-n16margin-left: -64px; (LTR) / margin-right: -64px; (RTL)
mt-n1margin-top: -4px;
mt-n2margin-top: -8px;
mt-n3margin-top: -12px;
mt-n4margin-top: -16px;
mt-n5margin-top: -20px;
mt-n6margin-top: -24px;
mt-n7margin-top: -28px;
mt-n8margin-top: -32px;
mt-n9margin-top: -36px;
mt-n10margin-top: -40px;
mt-n11margin-top: -44px;
mt-n12margin-top: -48px;
mt-n13margin-top: -52px;
mt-n14margin-top: -56px;
mt-n15margin-top: -60px;
mt-n16margin-top: -64px;
mr-n1margin-right: -4px;
mr-n2margin-right: -8px;
mr-n3margin-right: -12px;
mr-n4margin-right: -16px;
mr-n5margin-right: -20px;
mr-n6margin-right: -24px;
mr-n7margin-right: -28px;
mr-n8margin-right: -32px;
mr-n9margin-right: -36px;
mr-n10margin-right: -40px;
mr-n11margin-right: -44px;
mr-n12margin-right: -48px;
mr-n13margin-right: -52px;
mr-n14margin-right: -56px;
mr-n15margin-right: -60px;
mr-n16margin-right: -64px;
me-n1margin-right: -4px; (LTR) / margin-left: -4px; (RTL)
me-n2margin-right: -8px; (LTR) / margin-left: -8px; (RTL)
me-n3margin-right: -12px; (LTR) / margin-left: -12px; (RTL)
me-n4margin-right: -16px; (LTR) / margin-left: -16px; (RTL)
me-n5margin-right: -20px; (LTR) / margin-left: -20px; (RTL)
me-n6margin-right: -24px; (LTR) / margin-left: -24px; (RTL)
me-n7margin-right: -28px; (LTR) / margin-left: -28px; (RTL)
me-n8margin-right: -32px; (LTR) / margin-left: -32px; (RTL)
me-n9margin-right: -36px; (LTR) / margin-left: -36px; (RTL)
me-n10margin-right: -40px; (LTR) / margin-left: -40px; (RTL)
me-n11margin-right: -44px; (LTR) / margin-left: -44px; (RTL)
me-n12margin-right: -48px; (LTR) / margin-left: -48px; (RTL)
me-n13margin-right: -52px; (LTR) / margin-left: -52px; (RTL)
me-n14margin-right: -56px; (LTR) / margin-left: -56px; (RTL)
me-n15margin-right: -60px; (LTR) / margin-left: -60px; (RTL)
me-n16margin-right: -64px; (LTR) / margin-left: -64px; (RTL)
mb-n1margin-bottom: -4px;
mb-n2margin-bottom: -8px;
mb-n3margin-bottom: -12px;
mb-n4margin-bottom: -16px;
mb-n5margin-bottom: -20px;
mb-n6margin-bottom: -24px;
mb-n7margin-bottom: -28px;
mb-n8margin-bottom: -32px;
mb-n9margin-bottom: -36px;
mb-n10margin-bottom: -40px;
mb-n11margin-bottom: -44px;
mb-n12margin-bottom: -48px;
mb-n13margin-bottom: -52px;
mb-n14margin-bottom: -56px;
mb-n15margin-bottom: -60px;
mb-n16margin-bottom: -64px;
ma-automargin: auto;
ml-automargin-left: auto;
ms-automargin-left: auto; (LTR) / margin-right: auto; (RTL)
mt-automargin-top: auto;
mr-automargin-right: auto;
me-automargin-right: auto; (LTR) / margin-left: auto; (RTL)
mb-automargin-bottom: auto;
pa-0padding: 0;
pa-1padding: 4px;
pa-2padding: 8px;
pa-3padding: 12px;
pa-4padding: 16px;
pa-5padding: 20px;
pa-6padding: 24px;
pa-7padding: 28px;
pa-8padding: 32px;
pa-9padding: 36px;
pa-10padding: 40px;
pa-11padding: 44px;
pa-12padding: 48px;
pa-13padding: 52px;
pa-14padding: 56px;
pa-15padding: 60px;
pa-16padding: 64px;
pl-0padding-left: 0;
pl-1padding-left: 4px;
pl-2padding-left: 8px;
pl-3padding-left: 12px;
pl-4padding-left: 16px;
pl-5padding-left: 20px;
pl-6padding-left: 24px;
pl-7padding-left: 28px;
pl-8padding-left: 32px;
pl-9padding-left: 36px;
pl-10padding-left: 40px;
pl-11padding-left: 44px;
pl-12padding-left: 48px;
pl-13padding-left: 52px;
pl-14padding-left: 56px;
pl-15padding-left: 60px;
pl-16padding-left: 64px;
ps-0padding-left: 0; (LTR) / padding-right: 0; (RTL)
ps-1padding-left: 4px; (LTR) / padding-right: 4px; (RTL)
ps-2padding-left: 8px; (LTR) / padding-right: 8px; (RTL)
ps-3padding-left: 12px; (LTR) / padding-right: 12px; (RTL)
ps-4padding-left: 16px; (LTR) / padding-right: 16px; (RTL)
ps-5padding-left: 20px; (LTR) / padding-right: 20px; (RTL)
ps-6padding-left: 24px; (LTR) / padding-right: 24px; (RTL)
ps-7padding-left: 28px; (LTR) / padding-right: 28px; (RTL)
ps-8padding-left: 32px; (LTR) / padding-right: 32px; (RTL)
ps-9padding-left: 36px; (LTR) / padding-right: 36px; (RTL)
ps-10padding-left: 40px; (LTR) / padding-right: 40px; (RTL)
ps-11padding-left: 44px; (LTR) / padding-right: 44px; (RTL)
ps-12padding-left: 48px; (LTR) / padding-right: 48px; (RTL)
ps-13padding-left: 52px; (LTR) / padding-right: 52px; (RTL)
ps-14padding-left: 56px; (LTR) / padding-right: 56px; (RTL)
ps-15padding-left: 60px; (LTR) / padding-right: 60px; (RTL)
ps-16padding-left: 64px; (LTR) / padding-right: 64px; (RTL)
pt-0padding-top: 0;
pt-1padding-top: 4px;
pt-2padding-top: 8px;
pt-3padding-top: 12px;
pt-4padding-top: 16px;
pt-5padding-top: 20px;
pt-6padding-top: 24px;
pt-7padding-top: 28px;
pt-8padding-top: 32px;
pt-9padding-top: 36px;
pt-10padding-top: 40px;
pt-11padding-top: 44px;
pt-12padding-top: 48px;
pt-13padding-top: 52px;
pt-14padding-top: 56px;
pt-15padding-top: 60px;
pt-16padding-top: 64px;
pr-0padding-right: 0;
pr-1padding-right: 4px;
pr-2padding-right: 8px;
pr-3padding-right: 12px;
pr-4padding-right: 16px;
pr-5padding-right: 20px;
pr-6padding-right: 24px;
pr-7padding-right: 28px;
pr-8padding-right: 32px;
pr-9padding-right: 36px;
pr-10padding-right: 40px;
pr-11padding-right: 44px;
pr-12padding-right: 48px;
pr-13padding-right: 52px;
pr-14padding-right: 56px;
pr-15padding-right: 60px;
pr-16padding-right: 64px;
pe-0padding-right: 0; (LTR) / padding-left: 0; (RTL)
pe-1padding-right: 4px; (LTR) / padding-left: 4px; (RTL)
pe-2padding-right: 8px; (LTR) / padding-left: 8px; (RTL)
pe-3padding-right: 12px; (LTR) / padding-left: 12px; (RTL)
pe-4padding-right: 16px; (LTR) / padding-left: 16px; (RTL)
pe-5padding-right: 20px; (LTR) / padding-left: 20px; (RTL)
pe-6padding-right: 24px; (LTR) / padding-left: 24px; (RTL)
pe-7padding-right: 28px; (LTR) / padding-left: 28px; (RTL)
pe-8padding-right: 32px; (LTR) / padding-left: 32px; (RTL)
pe-9padding-right: 36px; (LTR) / padding-left: 36px; (RTL)
pe-10padding-right: 40px; (LTR) / padding-left: 40px; (RTL)
pe-11padding-right: 44px; (LTR) / padding-left: 44px; (RTL)
pe-12padding-right: 48px; (LTR) / padding-left: 48px; (RTL)
pe-13padding-right: 52px; (LTR) / padding-left: 52px; (RTL)
pe-14padding-right: 56px; (LTR) / padding-left: 56px; (RTL)
pe-15padding-right: 60px; (LTR) / padding-left: 60px; (RTL)
pe-16padding-right: 64px; (LTR) / padding-left: 64px; (RTL)
pb-0padding-bottom: 0;
pb-1padding-bottom: 4px;
pb-2padding-bottom: 8px;
pb-3padding-bottom: 12px;
pb-4padding-bottom: 16px;
pb-5padding-bottom: 20px;
pb-6padding-bottom: 24px;
pb-7padding-bottom: 28px;
pb-8padding-bottom: 32px;
pb-9padding-bottom: 36px;
pb-10padding-bottom: 40px;
pb-11padding-bottom: 44px;
pb-12padding-bottom: 48px;
pb-13padding-bottom: 52px;
pb-14padding-bottom: 56px;
pb-15padding-bottom: 60px;
pb-16padding-bottom: 64px;
ads via vuetify

Usage

The helper classes apply margin, padding, or gap to an element ranging from 0 to 16. Each size increment was designed to align with common Material Design spacings. These classes can be applied using the following format {property}{direction}-{size}.

p
m
Use the controls above to try out the different spacing helpers.

The property applies the type of spacing:

  • m - applies margin
  • p - applies padding
  • g - applies gap

The direction designates the side the property applies to:

  • t - applies the spacing for margin-top and padding-top
  • b - applies the spacing for margin-bottom and padding-bottom
  • l - applies the spacing for margin-left and padding-left
  • r - applies the spacing for margin-right, padding-right, and row-gap
  • s - applies the spacing for margin-left/padding-left (in LTR mode) and margin-right/padding-right (in RTL mode)
  • e - applies the spacing for margin-right/padding-right (in LTR mode) and margin-left/padding-left (in RTL mode)
  • x - applies the spacing for margin and padding *-left and *-right
  • y - applies the spacing for margin and padding *-top and *-bottom
  • a - applies the spacing for margin, padding and gap in all directions
  • c - applies the spacing for column-gap

The size controls the increment of the property in 4px intervals:

  • 0 - eliminates all margin, padding or gap by setting it to 0
  • 1 - sets margin, padding or gap to 4px
  • 2 - sets margin, padding or gap to 8px
  • 3 - sets margin, padding or gap to 12px
  • 4 - sets margin, padding or gap to 16px
  • 5 - sets margin, padding or gap to 20px
  • 6 - sets margin, padding or gap to 24px
  • 7 - sets margin, padding or gap to 28px
  • 8 - sets margin, padding or gap to 32px
  • 9 - sets margin, padding or gap to 36px
  • 10 - sets margin, padding or gap to 40px
  • 11 - sets margin, padding or gap to 44px
  • 12 - sets margin, padding or gap to 48px
  • 13 - sets margin, padding or gap to 52px
  • 14 - sets margin, padding or gap to 56px
  • 15 - sets margin, padding or gap to 60px
  • 16 - sets margin, padding or gap to 64px
  • n1 - sets margin to -4px
  • n2 - sets margin to -8px
  • n3 - sets margin to -12px
  • n4 - sets margin to -16px
  • n5 - sets margin to -20px
  • n6 - sets margin to -24px
  • n7 - sets margin to -28px
  • n8 - sets margin to -32px
  • n9 - sets margin to -36px
  • n10 - sets margin to -40px
  • n11 - sets margin to -44px
  • n12 - sets margin to -48px
  • n13 - sets margin to -52px
  • n14 - sets margin to -56px
  • n15 - sets margin to -60px
  • n16 - sets margin to -64px
  • auto - sets the spacing to auto

Examples

Breakpoints

Vuetify comes with a 12 point grid system built using Flexbox. Spacing is used to create specific layouts within an application’s content. It consists of 5 media breakpoints used to target specific screen sizes or orientations: xs, sm, md, lg and xl. The default resolutions are defined below in the Viewport Breakpoints table and can be modified by customizing the breakpoint service config.

DeviceCodeTypeRange
Extra smallxsSmall to large phone< 600px
SmallsmSmall to medium tablet600px > < 840px
MediummdLarge tablet to laptop840px > < 1145px
LargelgLaptop to desktop1145px > < 1545px
Extra largexl1080p to 1440p desktop1545px > < 2138px
Extra extra largexxl4k and ultra-wide> 2138px
Specification

The helper classes apply margin or padding at a given breakpoint. These classes can be applied using the following format: {property}{direction}-{breakpoint}-{size}. This does not apply to xs as it is inferred; e.g. ma-xs-2 equals ma-2.

Adjust screen size to see spacing changes

Horizontal

Margin helper classes let you easily center content horizontally.

Centered

Gap

Use the gap helper classes to easily apply a gap between content.

Gapped
Gapped
Gapped
Gapped
Gapped
Gapped
Gapped
Gapped

Negative margin

Margin can also be applied negatively at the same 1 to 16 intervals.

This card has negative top margin applied

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Elevation
Styles
Content
Styles
Grids
Components