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 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}.
속성 은 다음과 같은 간격의 유형에 적용됩니다
m-margin에 적용p-padding에 적용
방향 은 속성이 적용되는 방향입니다.
x-*-left과*-right에 둘다 적용y-*-top과*-bottom에 둘다 적용a-margin이나padding을 모든 방향에 적용
The size controls the increment of the property in 4px intervals:
0- eliminates allmarginorpaddingby setting it to01- setsmarginorpaddingto 4px2- setsmarginorpaddingto 8px3- setsmarginorpaddingto 12px4- setsmarginorpaddingto 16px5- setsmarginorpaddingto 20px6- setsmarginorpaddingto 24px7- setsmarginorpaddingto 28px8- setsmarginorpaddingto 32px9- setsmarginorpaddingto 36px10- setsmarginorpaddingto 40px11- setsmarginorpaddingto 44px12- setsmarginorpaddingto 48px13- setsmarginorpaddingto 52px14- setsmarginorpaddingto 56px15- setsmarginorpaddingto 60px16- setsmarginorpaddingto 64pxn1- setsmarginto -4pxn2- setsmarginto -8pxn3- setsmarginto -12pxn4- setsmarginto -16pxn5- setsmarginto -20pxn6- setsmarginto -24pxn7- setsmarginto -28pxn8- setsmarginto -32pxn9- setsmarginto -36pxn10- setsmarginto -40pxn11- setsmarginto -44pxn12- setsmarginto -48pxn13- setsmarginto -52pxn14- setsmarginto -56pxn15- setsmarginto -60pxn16- setsmarginto -64pxauto- sets the spacing toauto
간단한 예재부터 복잡한 예제까지 아래를 참고해서 앱 개발을 시작해 보세요.
Using the margin helper classes you can easily center content horizontally.
Margin can also be applied negatively at the same 1 to 16 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.
| Device | Code | Types | Range |
|---|---|---|---|
| Extra small | xs | small to large handset | < 600px |
| Small | sm | small to medium tablet | 600px > < 960px |
| Medium | md | large tablet to laptop | 960px > < 1264px* |
| Large | lg | desktop | 1264px* > < 1904px* |
| Extra large | xl | 4k 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}. This does not apply to xs as it is inferred; e.g. ma-xs-2 equals ma-2.