如何缩小Vuetify输入控件中标签与输入框的垂直间距？

问题描述 #

我自定义了一个Vuetify文本输入框，代码如下：

<template>
  <v-app>
    <v-container>
      <v-text-field
        label="label goes here"
        variant="plain"
        density="compact"
        hide-details="auto"
        color="primary"
        class="my-1"
        model-value="some text goes here"
      />
    </v-container>
  </v-app>
</template>

<style scoped>
  :deep(.v-input),
  :deep(.v-field),
  :deep(.v-label--clickable) {
    font-size: 12px;
  }

  :deep(.v-label.v-field-label) {
    font-size: 10px;
  }
</style>

目前标签与输入内容的垂直间距过大，我尝试修改height属性但没有效果：

.v-input {
  height: 4px;
  min-height: 4px;
  max-height: 4px;
}

.v-field {
  height: 4px;
  min-height: 4px;
  max-height: 4px;
}

.v-text-field {
  height: 4px;
  min-height: 4px;
  max-height: 4px;
}

最优解法 #

你的CSS无效是因为两点：一是未用:deep()穿透Vuetify组件的作用域（后续修改height的代码没加该穿透符），二是直接修改height会被Vuetify内置布局样式覆盖。以下是几种靠谱的调整方式：

方法1：调整标签的垂直偏移（适配plain变体） #

对于variant="plain"的输入框，标签位置由transform: translateY()控制，缩小该值就能拉近和输入内容的距离：

<style scoped>
/* 保留原有字体样式 */
:deep(.v-input),
:deep(.v-field),
:deep(.v-label--clickable) {
  font-size: 12px;
}

:deep(.v-label.v-field-label) {
  font-size: 10px;
}

/* 新增：缩小标签垂直偏移量 */
:deep(.v-field--variant-plain .v-label.v-field-label) {
  transform: translateY(-8px); /* 默认值通常为-12px，可按需微调 */
}

/* 可选：调整输入内容内边距，避免与标签重叠 */
:deep(.v-field--variant-plain .v-field__input) {
  padding-top: 2px;
}
</style>

方法2：压缩字段的上下内边距 #

如果需要更彻底的紧凑效果，可直接修改字段的上下内边距：

<style scoped>
/* 保留原有字体样式 */

/* 压缩字段上下内边距 */
:deep(.v-field) {
  padding-top: 0;
  padding-bottom: 0;
}

/* 同步调整标签位置 */
:deep(.v-field-label) {
  top: 4px; /* 默认值通常为8px，配合内边距调整 */
  transform: translateY(-50%);
}
</style>

方法3：使用Vuetify内置density参数（推荐） #

你已经用了density="compact"，还可以尝试自定义密度值，这是官方推荐的组件紧凑度调整方式：

<v-text-field
  label="label goes here"
  variant="plain"
  density="-2" /* 范围从-3到+3，值越小组件越紧凑 */
  hide-details="auto"
  color="primary"
  class="my-1"
  model-value="some text goes here"
/>

这种方式无需额外写CSS，配合你自定义的字体大小，就能快速达到理想间距。

为什么之前的方法无效？ #

Vuetify组件样式做了深度封装，直接修改height会被组件内部的min-height和布局逻辑覆盖；同时未添加:deep()穿透的话，自定义样式无法作用到Vuetify内部元素。只有针对标签偏移、字段内边距调整，或者使用官方提供的密度参数，才能真正改变垂直间距。

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