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

Question

文档 告诉我可以使用辅助类来改变填充/边距。我想要从输入字段中删除填充，因此我需要的类是 pa-0 ({属性}{方向}-{大小}):

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

这里是 JSFiddle。

无法工作。有什么建议吗？

编辑：我发现我的 JSFiddle 与本地设置中获得完全不同的标记，这加深了我的困惑：

由 Vuetify 本地生成的标记（我想在此处删除 <input> 元素内部的垂直填充以及 <div class="v-input__slot"> 元素上的水平填充）：

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

Vuetify在JSFiddle上生成的标记，使用完全相同的Vuetify代码行(<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>

文档中缺乏例子，这真的没有帮助。

文档中缺乏例子，这真的没有帮助。

- drake035

---

你能提供一支笔吗？ - Boussadjra Brahim

你是在谈论文本框内或外的填充吗？ - Boussadjra Brahim

不是属性，而是类：class="pa-0 ma-0" - Traxo

谢谢。我之前在本地试过，但是现在它在我的JSFiddle上运行良好。有什么想法为什么它在我的本地设置上没有改变任何东西，或者为什么这两个标记完全不同？ - drake035

刚刚注意到你的 fiddle 正在使用 vuetify 版本 0.14，哈哈，那是非常老的版本，这就是为什么标记不同的原因。因此，也许可以使用另一个模板进行进一步测试。 - Traxo

Answer 1

使用hide-details选项：<v-text-field hide-details></v-text-field>，可以移除底部边距，这是因为如果有详情字段用于显示详细信息，则会出现此边距。

- serge

---

这对于vuetify 3同样适用。 - arthurDent

如果需要在出现错误时显示详细信息，可以使用：hide-details="auto"。 - Georgi Georgiev

Answer 2

使用间距辅助器：

class="ma-0" 可以去除外边距
class="pa-0" 可以去除内边距
class="ma-0 pa-0" 可以同时去除外边距和内边距

请注意，这些也是一些组件的 props，但仅适用于某些（网格）组件，例如：
<v-text-field class="pa-0"></v-text-field> 可行，
而 <v-text-field pa-0></v-text-field> 不可行。

这些类被添加在顶层元素上，所以如果您无法使用这些类来去除某些组件中的子元素间距，则可能需要使用 CSS 来针对相关元素进行更改。

---

为了避免使用!important，请为组件添加自定义类，并检查要编辑的元素，然后检查用于定位它的内容 - 例如.v-input__slot（我们只需要高亮显示的目标）：

然后像这样替换它（custom-text-field 是应用于组件的任意自定义类）

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

- Traxo

---

但是即使是<v-text-field class="pa-0"><v-text-field>也不起作用：https://codepen.io/Draikin1/pen/jQZqYV。真的没有办法在不手动覆盖的情况下去除这些填充/边距吗？ :/ - drake035

@drake035 你能更具体地说明你想要删除哪些吗？对于类(class)而言，很可能不行，但也许你想要添加single-line属性以使其居中？codepen。（因为复制品中的vuetify版本不匹配，所以我不太清楚你的目标是什么） - Traxo

我想要去掉<input>元素内的垂直填充和<div class="v-input__slot">上的水平填充。目前，我使用非常丑陋的!important CSS规则在.v-input__slot { ... }和input { ... }上进行操作，但是我希望能有更好的解决方案... - drake035

@drake035 我认为现在没有班级可以删除这些填充，因为删除这些特定的填充可能不是常见的用例（例如，将光标贴着左边框可能不是常见的设计，这显然是您正在尝试做的）。因此，不时使用自己的CSS并没有什么奇怪的地方。但是，您可能希望向v-text-field添加自定义类，然后针对该类别的子元素定位CSS，以便没有副作用，例如.custom-text-field .v-input__slot（除非您希望它在全局范围内生效）。 - Traxo

@drake035 顺便说一下，如果你正确地定位它，例如 .v-text-field.v-text-field--enclosed .v-input__slot，就不需要使用 !important。 - Traxo

谢谢，但即使像这样使用自定义类（.custom-text-field .v-input__slot），我仍然需要使用 !important。看起来大多数，如果不是全部自定义样式都必须带有 !important 才能与 Vuetify 风格兼容。这真的不太理想 :( - drake035

Answer 3

Vue3 的更新答案

接受的答案要求您包含整个树，例如：

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

Vue 有一个更简单的方法可用于此，称为 深度选择器。

在 Vue2 中，代码片段如下：

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

在 Vue3 中，对于 v-text-field，代码如下（请注意不同的类）。

.custom-text-field /deep/ .v-field__input { padding: 0; }

- DigitalDirk