间距

更新您的布局而无需创建新的类,间距辅助器对于修改元素的填充(padding)和边距(margin)都非常有用。

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.

如何运行

margin或者padding应用于一个元素,范围在 0到5 之间。每个尺寸增量都设计成与常用Material Design间距对齐。这些类可以使用{property}{direction}-{size}这个格式来应用。.

占位符 property 用来设置间距的类型:

  • m - 对应 margin
  • p - 对应 padding

占位符 direction 指定属性所应用到的方向:

  • t - 对应margin-top或者padding-top属性
  • b - 对应margin-bottom or padding-bottom
  • l - 对应margin-left or padding-left
  • r - 对应margin-right or padding-right
  • x - 同时对应*-left*-right属性
  • y - 同时对应*-top*-bottom属性

占位符 size 控制属性的增量:

  • 0 - 将margin或者padding设置为0,会使这些属性被删除
  • 1 - 将margin或者padding属性设置为$spacer * .25
  • 2 - 将margin或者padding属性设置为$spacer * .5
  • 3 - 将margin或者padding属性设置为$spacer
  • 4 - 将margin或者padding属性设置为$spacer * 1.5
  • 5 - 将margin或者padding属性设置为$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