Vuetify v-text-field bottom spacing when reducing font size

Hello everyone,
I am using VueJS along with Vuetify. I have a case in which I am using multiple components in a form but I am changing the default font size via css. There is an empty space that remains under the input html element up to the bottom line of the . How to remove this space? For reference I am attaching a simple screenshot from the codepen of Vuetify.


Thank you so much in advance.

The space in v-text-field is because of padding in input field.

Via CSS:

.v-text-field input {
  padding: 2px 0;

Via SCSS you can override $text-field-padding variable

Hi @Jayesh,
following up on your reply, unfortunately there is an absolute positioned ::before and ::after. I have just overwritten these to my SCSS file and it worked like a charm! I will proceed in accepting your answer though because I haven’t paid attention enough to the documentation of Vuetify that was showing the variables.

Best regards.