Vuetify组件行间距调整求助：如何自定义表单元素间距？

无法理解为何不同Vuetify组件默认间距存在差异，尝试过网上的旧方案但无法生效，这些方案要么过时要么过于复杂。当前效果如下：

我希望减少表单输入行之间的间距，并增大按钮与表单输入区域的间距，目前仅能通过添加class="mt-2"实现按钮间的间距调整。

现有代码 #

<template>
  <div class="d-flex align-center flex-column">
    <v-card width="600">
      <v-card-title class="headline black" primary-title>
        choose one of the following:
      </v-card-title>
      <v-card-text class="pa-3">
        <v-form ref="rideForm">
          <v-row>
            <v-btn block variant="outlined" color="blue">choice 1</v-btn>
          </v-row>
          <v-row>
            <v-btn block variant="outlined" color="blue">choice 2</v-btn>
          </v-row>
          <v-row>
            <v-btn block variant="outlined" color="blue">choice 3</v-btn>
          </v-row>
          <v-spacer></v-spacer>
          <v-row>
            <v-col>
              <v-text-field label="Destination" />
            </v-col>
            <v-col>
              <v-text-field label="Distance" />
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="6">
              <v-text-field label="Date" />
            </v-col>
            <v-col cols="3">
              <v-combobox label="Time: Hour"></v-combobox>
            </v-col>
            <v-col cols="3">
              <v-combobox label="Minute"></v-combobox>
            </v-col>
          </v-row>
          <v-row>
            <v-col cols="6">
              <v-text-field label="Starting At" />
            </v-col>
            <v-col cols="3">
              <v-text-field label="Maximum" />
            </v-col>
            <v-col cols="3">
              <v-text-field label="Speed" />
            </v-col>
          </v-row>
          <v-row>
            <v-col>
              <v-btn block color="blue" variant="outlined" class="mt-2"
                >Cancel</v-btn
              >
            </v-col>
            <v-col>
              <v-btn block color="blue" type="submit" class="mt-2">Save</v-btn>
            </v-col>
          </v-row>
        </v-form>
      </v-card-text>
    </v-card>
  </div>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref('Hello World!')
</script>

无效的CSS方案 #

针对v-list的调整方案对其他组件无效：

.v-list-item {
  min-height: 10px !important;
  padding-top: 0;
  padding-bottom: 0;
}

可行的间距调整方法 #

1. 减少表单输入行间距

   • 直接给输入区域的v-row添加间距类，比如class="mb-2"，替代默认的行间距：

     <v-row class="mb-2">
       <v-col>
         <v-text-field label="Destination" />
       </v-col>
       <v-col>
         <v-text-field label="Distance" />
       </v-col>
     </v-row>
     

   • 批量调整的话，给v-form添加自定义类，再通过CSS统一控制：

     <v-form class="compact-form" ref="rideForm">
     

     .compact-form .v-row {
       margin-bottom: 0.5rem; /* 根据需求调整数值 */
     }
     

2. 增大按钮区域与输入区域的间距

   • 在按钮所在的v-row上添加更大的上边距类，比如class="mt-5"，这样整个按钮行与上方输入区域的间距会明显增大：

     <v-row class="mt-5">
       <v-col>
         <v-btn block color="blue" variant="outlined">Cancel</v-btn>
       </v-col>
       <v-col>
         <v-btn block color="blue" type="submit">Save</v-btn>
       </v-col>
     </v-row>
     

   • 另外，原代码中的<v-spacer>无法有效分隔选择按钮和输入区域，建议替换为<v-divider class="my-4" />，或者给第一个输入行添加class="mt-4"来实现视觉区分。

为什么组件默认间距差异大 #

1. Vuetify遵循Material Design设计规范，不同组件的默认间距是为了匹配其功能定位和视觉层级：比如列表项需要紧凑排列，表单控件需要足够留白区分输入区域，布局容器需要间距保证内容区分度。
2. 每个组件有独立的CSS类和样式结构，优先级与内部边距/外边距逻辑不同，因此针对某一类组件的CSS调整无法直接复用在其他组件上。

内容的提问来源于stack exchange，提问作者quilkin