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 - 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
13 - sets margin or padding to 52px
14 - sets margin or padding to 56px
15 - sets margin or padding to 60px
16 - sets margin or padding 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.

Material Design Breakpoints
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.