如何去除Vuetify菜单内卡片上下的空白区域

问题描述：
作为VueJS/Vuetify新手，发现v-menu组件内的v-card上下存在透明空白区域。使用shaped属性并将卡片设为红色凸显问题后，通过Vue工具测量到菜单尺寸为267×230.6，卡片尺寸为267×185.6。相关代码如下：

<!-- Menu with card-->
<v-menu
  offset-overflow
  bottom
  left
  min-width="200"
  offset-y
  origin="top right"
  transition="scale-transition"
  v-model="menu"
  :close-on-content-click="false"
  :nudge-width="200"
>
  <template v-slot:activator="{ attrs, on }">
    <v-btn class="ml-2" min-width="0" text v-bind="attrs" v-on="on">
      <v-icon>mdi-airplane</v-icon>
    </v-btn>
  </template>

  <v-card shaped color="red">
    <v-list color="transparent">
      <v-list-item>
        <v-list-item-avatar>
          <img src="https://cdn.vuetifyjs.com/images/john.jpg" alt="John" />
        </v-list-item-avatar>

        <v-list-item-content>
          <v-list-item-title>John Leider</v-list-item-title>
          <v-list-item-subtitle>Founder of Vuetify</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list>

    <v-divider></v-divider>

    <v-card-actions>
      <v-spacer></v-spacer>

      <v-btn text @click="menu = false"> Cancel </v-btn>
      <v-btn color="primary" text @click="menu = false"> Save </v-btn>
    </v-card-actions>
  </v-card>
</v-menu>

原因分析 #

v-menu组件默认会给内容容器添加上下内边距（padding），这就是导致卡片上下出现空白的核心原因。

解决方法 #

方法1：使用content-class移除内边距

直接给v-menu添加content-class="pa-0"属性，强制移除内容容器的内边距：

<v-menu
  offset-overflow
  bottom
  left
  min-width="200"
  offset-y
  origin="top right"
  transition="scale-transition"
  v-model="menu"
  :close-on-content-click="false"
  :nudge-width="200"
  content-class="pa-0" <!-- 新增这一行 -->
>
  <!-- 其余代码不变 -->
</v-menu>

方法2：自定义样式覆盖

如果方法1不生效，可以通过自定义CSS样式直接覆盖v-menu的内容容器内边距：

.v-menu__content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

额外检查

如果空白仍然存在，检查是否是offset-y属性导致的位移，可尝试移除offset-y后观察效果；另外确认v-card是否有默认的margin，可给v-card添加ma-0属性确保没有外边距。

内容的提问来源于stack exchange，提问作者Pillo