ContextQMD
Back to Vuetify

Spacing

packages/docs/src/pages/en/styles/spacing.md

4.1.1220.2 KB
Original Source

Spacing

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

<PageFeatures />
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; { style="max-height: 420px;" fixed-header }
<PromotedEntry />

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}.

<ExamplesExample file="spacing/usage" />

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.

<FeaturesBreakpointsTable />

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.

<ExamplesExample file="spacing/breakpoints" />

Horizontal

Margin helper classes let you easily center content horizontally.

<ExamplesExample file="spacing/horizontal" />

Gap

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

<ExamplesExample file="spacing/gap" />

Negative margin

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

<ExamplesExample file="spacing/negative-margin" />