상점

기업

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

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.

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

속성 은 다음과 같은 간격의 유형에 적용됩니다

  • m - margin에 적용
  • p - padding에 적용

방향 은 속성이 적용되는 방향입니다.

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

Below is a collection of simple to complex examples.

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

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

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

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

Below is a collection of simple to complex examples.

Spacing with md and lg breakpoints

Ready for more? Continue reading with:

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!