间距

无需创建新类即可更新布局。Spacing helper 用于修改元素的 padding 和 margin。

使用 playground 来感受不同的 helper 类可以做什么。有关它们如何工作的解释，请参阅下面的工作原理一节。

如何运行

辅助类对范围从 0 to 16 的元素应用margin（边距）、padding（填充）或 gap（空白）。每个尺寸增量都被设计成与共同的材料设计间距对齐。这些类可以使用以下格式{property}{direction}-{size}应用。

property 应用间距类型:

• m - 应用 margin
• p - 应用 padding
• g - 应用 gap

direction 指定了该属性所应用的侧边:

• t - 应用 margin-top and padding-top的间距
• b - 应用 margin-bottom and padding-bottom的间距
• l - 应用 margin-left and padding-left的间距
• r - 应用 margin-right, padding-right, and row-gap的间距
• s - 应用 margin-left/padding-left (in LTR mode) and margin-right/padding-right (in RTL mode) 的间距
• e - 应用 margin-right/padding-right (in LTR mode) and margin-left/padding-left (in RTL mode) 的间距
• x - 应用边距和内边距 *-left and *-right的间距
• y - 应用边距和内边距 *-top and *-bottom的间距
• a - 在所有方向上margin（应用边距）、 padding（内边距）和 gap（间隙）的间距
• c - 应用column-gap（列间距）的间距

size 以 4px 增量控制间距属性:

• 0 - 通过将其设置为0来消除所有margin(边距), padding(内边距) 或 gap(间隙)
• 1 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 4px
• 2 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 8px
• 3 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 12px
• 4 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 16px
• 5 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 20px
• 6 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 24px
• 7 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 28px
• 8 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 32px
• 9 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 36px
• 10 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 40px
• 11 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 44px
• 12 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 48px
• 13 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 52px
• 14 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 56px
• 15 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 60px
• 16 - 设置margin(边距), padding(内边距) 或 gap(间隙) 为 64px
• n1 - 设置margin(边距) 为 4px
• n2 - 设置margin(边距) 为 8px
• n3 - 设置margin(边距) 为 12px
• n4 - 设置margin(边距) 为 16px
• n5 - 设置margin(边距) 为 20px
• n6 - 设置margin(边距) 为 24px
• n7 - 设置margin(边距) 为 28px
• n8 - 设置margin(边距) 为 32px
• n9 - 设置margin(边距) 为 36px
• n10 - 设置margin(边距) 为 40px
• n11 - 设置margin(边距) 为 44px
• n12 - 设置margin(边距) 为 48px
• n13 - 设置margin(边距) 为 52px
• n14 - 设置margin(边距) 为 56px
• n15 - 设置margin(边距) 为 60px
• n16 - 设置margin(边距) 为 64px
• auto - 设置间距为 auto

示例

断点

Vuetify 附带了一个使用 Flexbox 构建的 12 点网格系统。间距用于在应用程序的内容中创建特定的布局。它由 5 个媒体断点组成，用于针对特定的屏幕尺寸或方向:xs, sm, md, lg 和 xl。默认分辨率在下面的 Viewport Breakpoints 表中定义，并且可以通过自定义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 > < 1280px
Large	lg	Laptop to desktop	1280px > < 1920px
Extra large	xl	1080p to 1440p desktop	1920px > < 2560px
Extra extra large	xxl	4k and ultra-wide	> 2560px
Specification

helper 类在给定的断点处应用margin或padding。这些类可以使用以下格式应用:{property}{direction}-{breakpoint}-{size}。这并不适用于推断出来的xs;例如，ma-x -2 等于 ma-2。

Horizontal (水平布局)

边距辅助类使您可以轻松地将内容水平居中。

Gap (间隙)

使用间隙帮助器类可以轻松地在内容之间应用间隙。

负边距

同样也可以使用从1 to 16间隔的负边距。