How to lower space between label and field for Vuetify input controls?

Given a customized Vuetify textfield as an example

(Playground)

<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>

The vertical space between the label and the content is too much

What is the best way to lower the space? I tried to add

  .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;
  }

to see what happens but nothing changed.

The label is shifted on the Y-axis. When encountering such an issue, always use browser developer tools to identify the element whose position you don't understand, to find out "why it is there." Look for irrelevant settings and modifications that, when adjusted, will yield the desired result.

Factors influencing element position:

• generally position, with top, bottom, left, right (position changes relative to another element)
• margin, padding, border (developer tools indicate these)
• less frequently, transformations (translateX(), translateY(), translateZ())

Solution (label transform too high)

.v-field--variant-plain .v-label.v-field-label--floating {
  transform: translate(0px);
}

Vuetify Playground