Consider a custom Vuetify text field as an example
<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 space between the label and the content appears too large
https://i.sstatic.net/ZxcQM.png
What is the most effective way to reduce this space? I attempted 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 the impact, but no changes were observed.