Spacing

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 5. 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 *-top
  • b - applies the spacing for *-bottom
  • l - applies the spacing for *-left
  • r - applies the spacing for *-right
  • 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:

  • auto - sets the spacing to auto
  • 0 - removes the spacing by setting it to 0
  • 1 - sets the spacing to $spacer * .25
  • 2 - sets the spacing to $spacer * .5
  • 3 - sets the spacing to $spacer
  • 4 - sets the spacing to $spacer * 1.5
  • 5 - sets the spacing to $spacer * 3
Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore