vue的边距怎么设置_如何删除Vuetify中的填充或边距？

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}):

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 element and horizontal padding on

element):

Markup generated by Vuetify on JSFiddle using the exact same line of Vuetify code ():

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

解决方案

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:

will work,

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

}