Vue.js Vuetify nuxt，v卡之间的js间距

我完全不熟悉Vuetify，并尝试测试组件是否正常工作。除了两个v型卡之间的奇怪间距外，这个模块似乎还能工作

以下是我得到的：

空白空间约为736*484.8像素

代码：

<!-- Joke.vue -->
<template>
<v-app>

  <v-card
  elevation="5"
  class="pa-3 ma-0">

    <v-card
    class="ma-3 pa-5"
    elevation="5">
      <div>
        <v-card-text>test</v-card-text>
      </div>
    </v-card>

    <nuxt-link :to="'jokes/' + id">
      <v-card 
      elevation="5">
        <div class="joke">
          <p>{{ joke }}</p>
     
        </div>
      </v-card>
 
  </nuxt-link>


  </v-card>

</v-app>
 
</template>

测试
{{笑话}

我试图改变页边空白，但似乎不起作用

我正在使用@nuxtjs/vuetify“^1.11.2

<!-- index.vue-->
<template>
  <div >
    <SearchJokes v-on:search-text="searchText"/>
    
    <Joke v-for="joke in jokes" :key="joke.id" :id="joke.id" :joke="joke.joke"/>
    
  </div>
</template>