Spacing
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.
How it works
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}
.
The property applies the type of spacing:
m
- appliesmargin
p
- appliespadding
The direction designates the side the property applies to:
t
- applies the spacing formargin-top
andpadding-top
b
- applies the spacing formargin-bottom
andpadding-bottom
l
- applies the spacing formargin-left
andpadding-left
r
- applies the spacing formargin-right
andpadding-right
s
- applies the spacing formargin-left
/padding-left
(in LTR mode) andmargin-right
/padding-right
(in RTL mode)e
- applies the spacing formargin-right
/padding-right
(in LTR mode) andmargin-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 allmargin
orpadding
by setting it to0
1
- setsmargin
orpadding
to 4px2
- setsmargin
orpadding
to 8px3
- setsmargin
orpadding
to 12px4
- setsmargin
orpadding
to 16px5
- setsmargin
orpadding
to 20px6
- setsmargin
orpadding
to 24px7
- setsmargin
orpadding
to 28px8
- setsmargin
orpadding
to 32px9
- setsmargin
orpadding
to 36px10
- setsmargin
orpadding
to 40px11
- setsmargin
orpadding
to 44px12
- setsmargin
orpadding
to 48px13
- setsmargin
orpadding
to 52px14
- setsmargin
orpadding
to 56px15
- setsmargin
orpadding
to 60px16
- setsmargin
orpadding
to 64pxn1
- setsmargin
to -4pxn2
- setsmargin
to -8pxn3
- setsmargin
to -12pxn4
- setsmargin
to -16pxn5
- setsmargin
to -20pxn6
- setsmargin
to -24pxn7
- setsmargin
to -28pxn8
- setsmargin
to -32pxn9
- setsmargin
to -36pxn10
- setsmargin
to -40pxn11
- setsmargin
to -44pxn12
- setsmargin
to -48pxn13
- setsmargin
to -52pxn14
- setsmargin
to -56pxn15
- setsmargin
to -60pxn16
- setsmargin
to -64pxauto
- 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.
Device | Code | Type | Range |
---|---|---|---|
Extra small | xs | Small to large phone | < 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-wide | > 1904px* |
* -16px on desktop for browser scrollbar | |||
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
.
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 16 intervals.