如何在 vuetify 中删除文本区域底部边距？答案

【问题标题】：How to remove text area bottom margin in vuetify?如何在 vuetify 中删除文本区域底部边距？
【发布时间】：2020-07-12 07:25:18
【问题描述】：

嘿，我有这个代码：

    <v-text-field 
  :rules="rules" 
  v-model="exam.title"
  class="exam-title ma-0 pa-0"
  ></v-text-field>
<v-text-field class="exam-title ma-0 pa-0"></v-text-field>

然后它的底部有一些边距或填充，我无法通过类删除。我该如何摆脱它？

问题是通过将其包装在另一个元素中来解决的：

<v-col lg="8">
      <v-text-field 
        v-model="questions.question"
        class="question-container-question"
      ></v-text-field>
</v-col>

【问题讨论】：

ma-0 应该有效。您可以使用 jsfiddle 或代码沙箱为此创建一个小演示吗？
能不能分享一下周边的代码，在父元素中设置高度吗？

标签： css vue.js vuetify.js

【解决方案1】：

我找到了答案。当我将它包装在 v-card 中时，它似乎默认删除了填充或边距。奇怪的是，这是没有包含组件的情况。

【讨论】：

【解决方案2】：

我也遇到过同样的问题，发现设置hide-details 属性很有帮助...

<v-text-field hide-details class="exam-title">
</v-text-field>

https://codeply.com/p/d2SVndXmVi

【讨论】：

谢谢，看起来好多了！