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

Playground

Use the playground to get a feel for what the different helper classes can do. For an explanation of how they work, see the How it works section below.

How it works

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

The property applies the type of spacing:

  • m - applies margin
  • p - applies padding

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 and padding-right
  • 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 both *-left and *-right
  • y - applies the spacing for both *-top and *-bottom
  • a - applies the spacing for the property in all directions

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

  • 0 - eliminates all margin or padding by setting it to 0
  • 1 - sets margin or padding to 4px
  • 2 - sets margin or padding to 8px
  • 3 - sets margin or padding to 12px
  • 4 - sets margin or padding to 16px
  • 5 - sets margin or padding to 20px
  • 6 - sets margin or padding to 24px
  • 7 - sets margin or padding to 28px
  • 8 - sets margin or padding to 32px
  • 9 - sets margin or padding to 36px
  • 10 - sets margin or padding to 40px
  • 11 - sets margin or padding to 44px
  • 12 - sets margin or padding to 48px
  • n1 - sets negative margin to 4px
  • n2 - sets negative margin to 8px
  • n3 - sets negative margin to 12px
  • n4 - sets negative margin to 16px
  • n5 - sets negative margin to 20px
  • n6 - sets negative margin to 24px
  • n7 - sets negative margin to 28px
  • n8 - sets negative margin to 32px
  • n9 - sets negative margin to 36px
  • n10 - sets negative margin to 40px
  • n11 - sets negative margin to 44px
  • n12 - sets negative margin to 48px
  • auto - sets the spacing to auto

サンプル

Horizontal

Using the margin helper classes you can easily center content horizontally.

Negative margin

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

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

Material Design Viewport Breakpoints
DeviceCodeTypesRange
Extra smallxssmall to large handset< 600px
Smallsmsmall to medium tablet600px > < 960px
Mediummdlarge tablet to laptop960px > < 1264px*
Largelgdesktop1264px* > < 1904px*
Extra largexl4k and ultra-wides> 1904px*
* -16px on Desktop

How it works

The helper classes apply margin or padding at a given breakpoint. These classes can be applied using the following format: {property}{direction}-{breakpoint}-{size}.

サンプル

With breakpoint

Spacing with md and lg breakpoints

Edit this page on Github | Translate on Crowdin
Vuetify
StoreFor Enterprise