如何在 Vuetify 中删除填充或边距？

Question

The doc tells me I can use a helper class to change padding/margin. I want to remove padding from an input field, so the class I need is pa-0 ( {property}{direction}-{size} ):

<v-text-field v-model="mon" pa-0 solo></v-text-field>

JSFiddle here

Doesn't work. Any idea?

EDIT: I realise I obtain a completely different markup in my JSFiddle compared to my local setup, which compounds my confusion:

Markup generated by Vuetify locally (here I want to remove vertical padding inside the <input> element and horizontal padding on <div class="v-input__slot"> element):

<div class="v-input v-text-field v-text-field--enclosed v-text-field--outline v-input--is-label-active v-input--is-dirty theme--light">
  <div class="v-input__control">
    <div class="v-input__slot" style="">
      <div class="v-text-field__slot">
        <input type="text" pa-0="">
      </div>
    </div>
    <div class="v-text-field__details">
      <div class="v-messages theme--light">
        <div class="v-messages__wrapper"></div>
      </div>
    </div>
  </div>
</div>

Markup generated by Vuetify on JSFiddle using the exact same line of Vuetify code ( <v-text-field v-model="mon" pa-0 outline></v-text-field> ):

<div class="input-group input-group--text-field">
  <div class="input-group__input">
    <input outline="" pa-0="" tabindex="0" type="text">
  </div>
  <div class="input-group__details">
    <div class="input-group__messages"></div>
  </div>
</div>

The lack of examples throughout the docs REALLY doesn't help.

Answer 1

使用hide-details选项： <v-text-field hide-details></v-text-field>删除底部边距，因为用于显示详细信息的详细信息字段（如果可用）而出现。

Answer 2

use spacing helpers :

class="ma-0" removes margins
class="pa-0" removes padding
class="ma-0 pa-0" removes both

Note that these are also props but only for some (grid) components so for example:
<v-text-field class="pa-0"></v-text-field> will work,
and <v-text-field pa-0></v-text-field> will not work.

Classes are added on top-level element so if in some components you can't remove child-element(s) spacing with these classes, then likely you need to target relevant elements with CSS.

---

To avoid using !important , add custom class on the component and inspect element which you want to edit and then check what's used for targeting it - for example .v-input__slot (we only need highlighted target):

Then replace it like so ( custom-text-field is arbitrary custom class applied to the component)

.custom-text-field.v-text-field.v-text-field--enclosed .v-input__slot {
  padding: 0;
}