Vuetify中mt-32边距工具类失效问题求助

我刚学习使用Vuetify，尝试为以下代码中的v-form添加mt-32类，但该类无法生效。不过使用mt-16类时可正常工作，mt-32或mt-64均失效，希望不通过style="margin-top:32px;"实现mt-32的效果，请问原因是什么？

代码示例：

<template>
  <v-form class="mt-32">
    <v-container>
      <v-row align="center" justify="center">
        <RadioButton question_text="Your favourite search engine" />
      </v-row>
      <v-row align="center" justify="center">
        <v-col cols="12" md="6" xl="4">
          <SingleSelectForm />
        </v-col>
          <v-col cols="12" md="6" xl="4">
          <SingleSelectForm />
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

原因分析与解决方法 #

核心原因：Vuetify间距类的命名逻辑不是直接对应像素值 #

Vuetify的间距工具类（如mt-*、mb-*）的后缀数字不是像素值，而是对应基础间距单元的倍数，且只有预定义的倍数类才会生效：

• 默认基础间距单元（$spacer）：Vuetify 3中默认是8px，Vuetify 2中默认是4px
• 预定义的间距类后缀是0-16的整数（部分版本到12），超出范围的数字不会生成对应样式类，所以mt-32、mt-64这类类名不存在，自然无法生效
• 你使用的mt-16能生效，是因为它刚好在预定义倍数范围内（比如Vuetify2中mt-16对应16×4=64px的上边距）

实现32px上边距的正确方法 #

根据你使用的Vuetify版本，选择对应的预定义类：

• Vuetify 3：用mt-4（4×8=32px）
• Vuetify 2：用mt-8（8×4=32px）

修改后的代码示例：

<template>
  <!-- Vuetify3用mt-4，Vuetify2用mt-8 -->
  <v-form class="mt-4">
    <v-container>
      <v-row align="center" justify="center">
        <RadioButton question_text="Your favourite search engine" />
      </v-row>
      <v-row align="center" justify="center">
        <v-col cols="12" md="6" xl="4">
          <SingleSelectForm />
        </v-col>
          <v-col cols="12" md="6" xl="4">
          <SingleSelectForm />
        </v-col>
      </v-row>
    </v-container>
  </v-form>
</template>

内容的提问来源于stack exchange，提问作者osid al kourd